Skip to content

perf(frontend/mfa): lazy-load qrcode out of main bundle (closes #511) - #805

Merged
cristim merged 1 commit into
feat/multicloud-web-frontendfrom
fix/511-wave4
Jun 5, 2026
Merged

cristim merged 1 commit into
feat/multicloud-web-frontendfrom
fix/511-wave4

Conversation

@cristim

@cristim cristim commented May 28, 2026

Copy link
Copy Markdown
Member

Summary

  • auth.ts already uses import('qrcode') dynamically (PR feat(auth+frontend/mfa): finish MFA enrollment + login two-step (closes #497) #509), but the vendor splitChunks cache group had chunks: 'all', which captured async imports too -- so qrcode still ended up in vendors.js on every page load.
  • Added a dedicated qrcode cache group (chunks: 'async', priority 20) so webpack emits it as its own on-demand chunk.
  • Changed the vendor cache group to chunks: 'initial' (priority 10) so only synchronously-imported packages land in vendors.js.

Bundle output (production build)

Before:

js/vendors.175b9550.js  224 KiB   [initial, in main entrypoint]
Entrypoint app: 608 KiB

After:

js/vendors.4e1021cc.js        200 KiB   [initial, in main entrypoint]
js/qrcode.f45fe2e9.chunk.js    22.6 KiB  [async, loaded on first enrollment click]
Entrypoint app: 584 KiB  (-24 KiB)

vendors.js shrank 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 errors
  • npx jest -- 2142 tests pass, 0 failures (including auth-mfa-enroll.test.ts)
  • npm run build -- qrcode.*.chunk.js present in dist/js/, absent from entrypoint list
  • Manual: open profile, observe no qrcode chunk in Network panel until "Set up two-factor authentication" is clicked

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.
@cristim cristim added triaged Item has been triaged priority/p3 Polish / idea / may never ship severity/low Minor harm urgency/this-quarter Within the quarter impact/all-users Affects every user effort/s Hours type/chore Maintenance / non-user-visible labels May 28, 2026
@cristim

cristim commented May 28, 2026

Copy link
Copy Markdown
Member Author

@coderabbitai review

@coderabbitai

coderabbitai Bot commented May 28, 2026 •

Copy link
Copy Markdown
Contributor

Warning

Review limit reached

@cristim, we couldn't start this review because you've reached your PR review rate limit.

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 @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

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 configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 2480d2b7-3052-4d75-88f4-4edf8a3723f3

📥 Commits

Reviewing files that changed from the base of the PR and between 4956d66 and 313ed21.

📒 Files selected for processing (1)
  • frontend/webpack.config.js
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch fix/511-wave4

Comment @coderabbitai help to get the list of available commands and usage tips.

@coderabbitai

coderabbitai Bot commented May 28, 2026

Copy link
Copy Markdown
Contributor
✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

@cristim

cristim commented May 30, 2026

Copy link
Copy Markdown
Member Author

@coderabbitai full review

@coderabbitai

coderabbitai Bot commented May 30, 2026

Copy link
Copy Markdown
Contributor
✅ Actions performed

Full review triggered.

@cristim

cristim commented Jun 4, 2026

Copy link
Copy Markdown
Member Author

@coderabbitai review

@coderabbitai

coderabbitai Bot commented Jun 4, 2026

Copy link
Copy Markdown
Contributor

Rate Limit Exceeded

@cristim have exceeded the limit for the number of chat messages per hour. Please wait 38 minutes and 49 seconds before sending another message.

@cristim

cristim commented Jun 5, 2026

Copy link
Copy Markdown
Member Author

@coderabbitai review

@coderabbitai

coderabbitai Bot commented Jun 5, 2026 •

Copy link
Copy Markdown
Contributor
✅ Action performed

Review finished.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

@cristim
cristim merged commit 55739c2 into feat/multicloud-web-frontend Jun 5, 2026
5 checks passed
@cristim
cristim deleted the fix/511-wave4 branch July 27, 2026 11:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

effort/s Hours impact/all-users Affects every user priority/p3 Polish / idea / may never ship severity/low Minor harm triaged Item has been triaged type/chore Maintenance / non-user-visible urgency/this-quarter Within the quarter

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant