perf(frontend): split the routes and warm the chunks on idle
One 1.18 MB chunk containing all 27 views, every one eagerly imported and side-effect-evaluated before first paint. `index.ts` now holds a loader table per view and awaits the right chunk before creating the element. JS evaluated before first paint: 1 480 kB -> 772.9 kB, in 27 chunks instead of one, with the slowest first open of a view at 19 ms against 21 ms — both halves of the trade, and the second did not get worse. Two things it has to get right. `document.createElement` on an undefined tag yields an inert HTMLElement rather than throwing, so a missing entry in the table is a blank page and not an error; and navigations are numbered, so a slow chunk cannot land on top of a faster navigation. `notification-host`, `inline-notice` and `confirm-dialog` stay eager on purpose: a failure surface that has to fetch a chunk before it can speak is not a failure surface, and the moment it is most needed is the likeliest moment loading one fails.
This commit is contained in:
+1
-1
@@ -66,7 +66,7 @@ body div.sidebar {
|
||||
padding: 0.25em;
|
||||
background-color: var(--yj-bg-elevated, #343a40);
|
||||
display: grid;
|
||||
grid-template-columns: var(--now-playing-width, 200px) 1fr auto;
|
||||
grid-template-columns: var(--now-playing-width, 320px) 1fr auto;
|
||||
align-items: center;
|
||||
contain: layout style;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user