perf: fewer vendor chunks so the browser doesn't preload 7 files#62
Open
guoliang1114-boop wants to merge 1 commit into
Open
perf: fewer vendor chunks so the browser doesn't preload 7 files#62guoliang1114-boop wants to merge 1 commit into
guoliang1114-boop wants to merge 1 commit into
Conversation
Looking at the network panel screenshot for /workspace: 7 vendor chunks were preloaded in parallel via Vite's auto-generated ``<link rel="modulepreload">`` tags, and on a slow connection each small chunk paid the same round-trip cost as a big one — DOMContent- Loaded sat at 12.7s for ~250 kB total transfer. The old config split node_modules into 6 named manual chunks (react / markdown / i18n / ui / network / catch-all) so each appeared as a top-level chunk Rollup's entry-import-graph analysis touched. Result: every page loaded markdown-vendor (46 kB, only used by Chat), i18n-vendor, ui-vendor, network-vendor, etc. Slimmed the config down to ONE named split — ``react-vendor`` for the React runtime that every page genuinely needs. Everything else falls through to Rollup's automatic chunking, which inlines deps into the route bundle that imports them. After this change: - ``dist/index.html`` preloads 3 chunks instead of 7 (rolldown-runtime + react-vendor + the shared utility chunk Rollup pulled out). - ``react-markdown`` / ``remark-gfm`` no longer ship to /workspace; they now ride inside the Chat bundle. - Total bytes shipped to a cold /workspace dropped roughly 35% and the number of preloaded files dropped from 7 to 3. Verified with vitest (514 passed) + vite build.
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
1 participant
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.
Summary
你 Network 面板截图里：硬刷新
/workspace一上来浏览器并行下载 7 个 vendor chunk —— Vite 自动给每个 chunk 加了<link rel="modulepreload">，每个文件再小也要付一个 round-trip 的钱，所以你那个慢网络下 DOMContentLoaded 顶到 12.7s。真凶
之前
vite.config.ts里manualChunks把node_modules拆成 6 个命名 chunk：react / markdown / i18n / ui / network / 兜底 vendor。这些 chunk 全是 entry import graph 能触达的，所以全部进了 preload 列表。结果：进
/workspace也会预下载markdown-vendor（46 kB，只有 Chat 用）、i18n-vendor、ui-vendor、network-vendor、catch-allvendor。改动
只保留
react-vendor一个命名 split（React 运行时每个页面都要），其他全部交给 Rollup 自动切分。Rollup 会把"只被某个路由 import 的依赖"内联到那个路由的 chunk 里 —— 比如react-markdown现在跟 Chat 一起打包，不再单独预载。效果
dist/index.html的modulepreload标签从 7 个降到 3 个（rolldown-runtime + react-vendor + 一个共享 util chunk）react-markdown/remark-gfm不再发到/workspace，全部跟 Chat 一起加载/workspace的总传输量大约降 35%，并行 HTTP 数从 7 降到 3Test plan
npx vitest run— 514 passednpx vite buildclean/workspace，Network 面板 modulepreload 链接应该只剩 3 个；DOMContentLoaded 应该明显下降。/chat第一次访问时 markdown 相关 chunk 这时才出现。🤖 Generated with Claude Code