perf: lazy-load Algolia DocSearch to reduce initial bundle size - #5677
perf: lazy-load Algolia DocSearch to reduce initial bundle size#5677lb1192176991-lab wants to merge 1 commit into
Conversation
Replace static import of DocSearchModal with next/dynamic to code-split the ~200 KB @docsearch/react dependency. Remove the render-blocking CSS @import from globals.css — the CSS is loaded as a side-effect of the dynamic import only when the user opens search. Fixes asyncapi#5673
✅ Deploy Preview for asyncapi-website ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify project configuration. |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
Welcome to AsyncAPI. Thanks a lot for creating your first pull request. Please check out our contributors guide useful for opening a pull request.
Keep in mind there are also other channels you can use to interact with AsyncAPI community. For more details check out this issue.
|
📝 WalkthroughWalkthroughDocSearchModal now loads through a client-only dynamic import. The global DocSearch CSS CDN import is removed. ChangesDocSearch loading
Estimated code review effort: 1 (Trivial) | ~5 minutes Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@components/AlgoliaSearch.tsx`:
- Around line 11-14: Run the repository formatter on the DocSearchModal dynamic
import declaration in AlgoliaSearch.tsx and apply the resulting Prettier
formatting without changing its behavior.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: 39b76970-d5ae-4b7b-9dad-996151e5a29f
📒 Files selected for processing (2)
components/AlgoliaSearch.tsxstyles/globals.css
💤 Files with no reviewable changes (1)
- styles/globals.css
| const DocSearchModal = dynamic( | ||
| () => import('@docsearch/react').then((mod) => ({ default: mod.DocSearchModal })), | ||
| { ssr: false } | ||
| ); |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Fix the Prettier errors before merge.
ESLint reports prettier/prettier errors on Lines 11-14. Run the repository formatter.
Proposed formatting fix
-const DocSearchModal = dynamic(
- () => import('`@docsearch/react`').then((mod) => ({ default: mod.DocSearchModal })),
- { ssr: false }
-);
+const DocSearchModal = dynamic(() => import('`@docsearch/react`').then((mod) => ({ default: mod.DocSearchModal })), {
+ ssr: false
+});📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const DocSearchModal = dynamic( | |
| () => import('@docsearch/react').then((mod) => ({ default: mod.DocSearchModal })), | |
| { ssr: false } | |
| ); | |
| const DocSearchModal = dynamic(() => import('`@docsearch/react`').then((mod) => ({ default: mod.DocSearchModal })), { | |
| ssr: false | |
| }); |
🧰 Tools
🪛 ESLint
[error] 11-12: Replace ⏎··()·=>·import('@docsearch/react').then((mod)·=>·({·default:·mod.DocSearchModal·})), with ()·=>·import('@docsearch/react').then((mod)·=>·({·default:·mod.DocSearchModal·})),·{
(prettier/prettier)
[error] 13-14: Replace ·{·ssr:·false·}⏎ with ·ssr:·false⏎}
(prettier/prettier)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@components/AlgoliaSearch.tsx` around lines 11 - 14, Run the repository
formatter on the DocSearchModal dynamic import declaration in AlgoliaSearch.tsx
and apply the resulting Prettier formatting without changing its behavior.
Source: Linters/SAST tools
|
⚡️ Lighthouse report for the changes in this PR:
Lighthouse ran on https://deploy-preview-5677--asyncapi-website.netlify.app/ |
|
@lb1192176991-lab As mentioned in the issue, this is part of the Microgrant/Bounty Program and has already been assigned. Please refrain from working on it. Refer to the Microgrant Program rules here: https://github.com/asyncapi/community/blob/master/docs/010-contribution-guidelines/microgrant-program.md |
3 participants
What
This PR replaces the static import of DocSearchModal from @docsearch/react with a next/dynamic lazy import, and removes the render-blocking CSS @import of @docsearch/css from globals.css.
Changes:
Why
Every page on the AsyncAPI website was downloading and parsing the ~200 KB @docsearch/react bundle upfront, even though the search modal is only displayed when a user explicitly opens it. The render-blocking CSS @import was also delaying the browser first paint.
This negatively impacts Core Web Vitals:
With this change, the DocSearch assets are only loaded on demand when a user triggers search (Ctrl+K or / key), reducing initial bundle size and eliminating the render-blocking CSS.
Testing
Summary by CodeRabbit