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
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:
co-authored by
Claude Opus 5.5
parent
d7bc6d94bb
commit
8b6464c8b9
@@ -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({
|
||||
|
||||
Reference in New Issue
Block a user