Repository navigation
perf(web): load each page on demand, React in its own chunk - #258
Merged
Merged
Conversation
- Routes and create panels are lazy-loaded; Layout keeps the sidebar and shows a spinner while a page chunk downloads - React, the router and TanStack Query go to a vendor-react chunk that stays cached across deploys - The dashboard first load drops from 1.7 MB (454 KB gzip) to about 550 KB; recharts and reactflow only load with the pages that use them Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
The SPA was a single 1.7 MB bundle (454 KB gzip): every page, recharts, reactflow and the create forms were downloaded before the dashboard could render.
React.lazyfor every route and for the create panels (CreatePanelHost).Layoutwraps theOutletinSuspense, so the sidebar and header stay while a page chunk loads.vendor-reactchunk (react, react-dom, scheduler, react-router, TanStack Query) through rolldowncodeSplitting.groups: it changes far less often than the app, so it stays in the browser cache across deploys. With perf: paginate ListEvents, gzip the HTTP responses, cache the assets #257 the hashed assets are cachedimmutable.index.js(everything)vendor-reactindex(layout, shared)DashboardInsights(with recharts)CatalogDependencies,CatalogDetail)Dashboard first load: about 550 KB instead of 1.7 MB.
Checks
serv+web/dist: the 21 routes reached by client-side navigation render, the 5 create panels (event, lock, drift, RPA, service) open, no JS error.build:check,build:static,npm test(27): OK.Follow-up ideas
EventDetailsModaland the date-time picker (about 90 KB) on first load; they could load when the modal opens.🤖 Generated with Claude Code