Repository navigation
perf(frontend/mfa): lazy-load qrcode out of main bundle (closes #511) - #805
Conversation
auth.ts already uses `import('qrcode')` dynamically, but the vendor
cache group had `chunks: 'all'`, which pulled every node_modules import
into vendors.js regardless of whether the import was async.
Fix: add a dedicated `qrcode` cache group (chunks: 'async', priority 20)
so qrcode gets its own on-demand chunk, and change the vendor group to
`chunks: 'initial'` so only synchronously-required packages end up there.
Result: vendors.js 224 KB -> 200 KB (-24 KB); qrcode loaded only on
MFA enrollment click.
|
@coderabbitai review |
|
Warning Review limit reached
More reviews will be available in 32 minutes and 46 seconds. Learn how PR review limits work. Your organization has run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
✅ Actions performedReview triggered.
|
|
@coderabbitai full review |
✅ Actions performedFull review triggered. |
|
@coderabbitai review |
Rate Limit Exceeded
|
|
@coderabbitai review |
✅ Action performedReview finished.
|
Summary
auth.tsalready usesimport('qrcode')dynamically (PR feat(auth+frontend/mfa): finish MFA enrollment + login two-step (closes #497) #509), but the vendorsplitChunkscache group hadchunks: 'all', which captured async imports too -- so qrcode still ended up invendors.json every page load.qrcodecache group (chunks: 'async', priority 20) so webpack emits it as its own on-demand chunk.chunks: 'initial'(priority 10) so only synchronously-imported packages land invendors.js.Bundle output (production build)
Before:
After:
vendors.jsshrank by 24 KiB (10.7%). The qrcode chunk is fetched only when the user clicks "Set up two-factor authentication" in the profile modal.Test plan
npx tsc --noEmit-- no type errorsnpx jest-- 2142 tests pass, 0 failures (includingauth-mfa-enroll.test.ts)npm run build--qrcode.*.chunk.jspresent indist/js/, absent from entrypoint list