Address code-split review: chunk-load recovery + tidier lazy + gesture split
Build image / build-and-push (push) Successful in 10s
Build image / build-and-push (push) Successful in 10s
Gadfly on #106: - (2 models) React.lazy memoizes a REJECTED import, so after a deploy (every main push) a still-open app references chunk hashes the server just replaced — the import 404s and RouteError's "Try again" can never recover. New lazyPage() helper reloads once on a chunk-load failure to fetch fresh hashes (session-flag guarded against a reload loop; cleared on success). - (perf) @use-gesture is editor-only, but the single vendor chunk pulled it into the eager first paint. Exclude it from vendor so it rides with the lazy editor chunk (vendor 421→392 KB; the gesture code moved into the editor's own chunk). react/react-dom/tanstack still share one vendor chunk — splitting react-dom out is what broke React 19 at load. - (nits) lazyPage also unwraps the named export, so the five route lazies are uniform one-liners; moved the lazy block below the import group. Re-verified live: app mounts, /gardens/1 lazy-loads + renders the editor, console clean. tsc + build green, no >500 KB warning. Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]> Claude-Session: https://claude.ai/code/session_01H3zbym8Doka2d7D48maSgZ
This commit is contained in:
+8
-1
@@ -39,7 +39,14 @@ export default defineConfig(({ mode }) => {
|
||||
// routes are code-split separately via React.lazy (router.tsx), which is
|
||||
// where the real first-paint win is.
|
||||
manualChunks(id) {
|
||||
return id.includes('node_modules') ? 'vendor' : undefined
|
||||
if (!id.includes('node_modules')) return undefined
|
||||
// Editor-only libs (the gesture engine) ride with the lazy editor
|
||||
// chunk instead of the eager vendor one, so the first paint doesn't
|
||||
// pay for code only the canvas needs. Everything else — react, tanstack
|
||||
// and the rest — stays in ONE vendor chunk; splitting react-dom out
|
||||
// reorders its init across chunks and breaks React 19 at load.
|
||||
if (id.includes('@use-gesture')) return undefined
|
||||
return 'vendor'
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user