From f765bee7a1f081903ef62b2c26217f5ae61b3267 Mon Sep 17 00:00:00 2001 From: sinohqb Date: Fri, 17 Jul 2026 16:04:09 +0800 Subject: [PATCH] =?UTF-8?q?fix(frontend):=20=E4=BF=AE=E5=A4=8D=20vendor-ch?= =?UTF-8?q?arts=20=E5=BE=AA=E7=8E=AF=20chunk=20=E5=AF=BC=E8=87=B4=E7=9A=84?= =?UTF-8?q?=E8=BF=90=E8=A1=8C=E6=97=B6=E5=B4=A9=E6=BA=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## 问题 线上打开首页报错： 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 --- frontend/web/vite.config.ts | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/frontend/web/vite.config.ts b/frontend/web/vite.config.ts index 6808b57..d2547cd 100644 --- a/frontend/web/vite.config.ts +++ b/frontend/web/vite.config.ts @@ -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' }