perf: load the Settings dialog on demand; entry chunk 351.8 → 277.1 kB gzip
CI / Build & Quality Checks (pull_request) Canceled after 0s
CI / Trigger Desktop Build (pull_request) Canceled after 0s
CI / Secret scan (gitleaks) (pull_request) Canceled after 0s
CI / Docker image build & smoke test (pull_request) Canceled after 0s
CI / Playwright smoke (e2e) (pull_request) Canceled after 0s

Settings (every page, pickers, the denoise tester) was in the entry
chunk though it only renders when opened. Load it lazily behind a
focusable spinner (it opens inside a FocusTrap), and warm the chunk
when the app goes idle. SettingsPages and the status localStorage keys
move to tiny modules so callers don't pull the dialog back in.
sanitize-html (+postcss, htmlparser2) and chroma-js get their own vendor
chunks; with Settings gone the chunk graph had dropped them into the
entry chunk.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017PCb59uY3UKqDqt7B6hzd5
This commit is contained in:
Lotus CI
2026-10-19 00:00:19 -04:00
co-authored by Claude Opus 5.5
parent d7bc6d94bb
commit 8b6464c8b9
8 changed files with 83 additions and 13 deletions
+19
View File
@@ -251,6 +251,25 @@ const vendorChunks = (id) => {
if (id.includes('node_modules/immer')) return 'immer';
if (id.includes('node_modules/folds')) return 'folds';
if (id.includes('node_modules/emojibase')) return 'emojibase';
// HTML sanitising (sanitize-html pulls in postcss + htmlparser2) and colour
// maths are needed at startup but are big, stable libraries: keep them in
// their own cacheable chunks instead of wherever the chunk graph drops them
// (once Settings became lazy they landed in the entry chunk).
if (
id.includes('node_modules/sanitize-html') ||
id.includes('node_modules/postcss') ||
id.includes('node_modules/htmlparser2') ||
id.includes('node_modules/domhandler') ||
id.includes('node_modules/domutils') ||
id.includes('node_modules/dom-serializer') ||
id.includes('node_modules/entities') ||
id.includes('node_modules/parse-srcset') ||
id.includes('node_modules/nanoid') ||
id.includes('node_modules/picocolors') ||
id.includes('node_modules/source-map-js')
)
return 'sanitize-html';
if (id.includes('node_modules/chroma-js')) return 'chroma';
};
export default defineConfig({