From 313ed21dd12cb6c9ed3395911e23c3e76e869216 Mon Sep 17 00:00:00 2001 From: Cristian Magherusan-Stanciu Date: Thu, 28 May 2026 19:38:23 +0200 Subject: [PATCH] perf(frontend/mfa): lazy-load qrcode out of main bundle (closes #511) 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. --- frontend/webpack.config.js | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/frontend/webpack.config.js b/frontend/webpack.config.js index 7a20a4036..94f693890 100644 --- a/frontend/webpack.config.js +++ b/frontend/webpack.config.js @@ -80,10 +80,22 @@ module.exports = (env, argv) => { ], splitChunks: { cacheGroups: { + // qrcode is only used during MFA enrollment (dynamic import). + // Give it its own async chunk so it never lands in vendors.js. + qrcode: { + test: /[\\/]node_modules[\\/]qrcode[\\/]/, + name: 'qrcode', + chunks: 'async', + priority: 20, + enforce: true + }, vendor: { test: /[\\/]node_modules[\\/]/, name: 'vendors', - chunks: 'all' + // 'initial' means only synchronously-imported packages go here; + // async-only deps (e.g. qrcode) stay in their own lazy chunks. + chunks: 'initial', + priority: 10 } } }