fix(frontend): 修复 vendor-charts 循环 chunk 导致的运行时崩溃
## 问题 线上打开首页报错: vendor-charts-Z9UiCjXy.js: Uncaught ReferenceError: Cannot access 'd' before initialization ## 根因 T4 bundle 优化把 @ant-design/charts 单独拆为 vendor-charts chunk,但它的深层 @antv/* 依赖图与 vendor chunk 交叉引用,形成 Circular chunk(构建时已有警告 "vendor-charts -> vendor -> vendor-charts",当时被忽略)。循环 chunk 导致 ES module 求值顺序错乱 → TDZ 错误。 尝试把 @antv 也并入 vendor-charts 仍循环(charts 生态还依赖 lodash/d3 等 公共库,与 vendor 交叉)。 ## 修复 移除 vendor-charts 单独拆分,让 @ant-design/charts + @antv 回到 vendor 主 chunk, 消除跨 chunk 循环。保留 vendor-monaco / vendor-antd(构建证明无循环)。 charts 在 Home 首页(默认路由)即需加载,单独拆分的懒加载收益本就微乎其微; 真正的懒加载收益来自 App.tsx 的页面级 React.lazy(保留)。 构建验证:无 Circular chunk 警告,无 vendor-charts chunk。 Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
69100c3f40
commit
f765bee7a1
@ -25,19 +25,20 @@ export default defineConfig({
|
||||
rollupOptions: {
|
||||
output: {
|
||||
manualChunks(id) {
|
||||
// Monaco Editor — only used by Scenarios page
|
||||
// Monaco Editor — only used by Scenarios page, cleanly isolated.
|
||||
if (id.includes('@monaco-editor') || id.includes('monaco-editor')) {
|
||||
return 'vendor-monaco'
|
||||
}
|
||||
// @ant-design/charts — only used by Home page
|
||||
if (id.includes('@ant-design/charts')) {
|
||||
return 'vendor-charts'
|
||||
}
|
||||
// Ant Design core — used everywhere
|
||||
// Ant Design core — used everywhere, one-way deps (no circular chunk).
|
||||
if (id.includes('antd') || id.includes('@ant-design/icons')) {
|
||||
return 'vendor-antd'
|
||||
}
|
||||
// React + remaining libs — used everywhere, merged to avoid circular imports
|
||||
// Everything else (React, @ant-design/charts + @antv/*, etc.) → vendor.
|
||||
// NOTE: do NOT split @ant-design/charts into its own chunk — its deep
|
||||
// @antv dependency graph creates a circular chunk reference that causes
|
||||
// a runtime TDZ crash ("Cannot access 'd' before initialization").
|
||||
// charts is loaded on the Home page (default route) anyway, so a
|
||||
// separate chunk buys almost nothing.
|
||||
if (id.includes('node_modules')) {
|
||||
return 'vendor'
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user