## 问题 线上打开首页报错: 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>
49 lines
1.5 KiB
TypeScript
49 lines
1.5 KiB
TypeScript
import { defineConfig } from 'vite'
|
|
import react from '@vitejs/plugin-react'
|
|
|
|
export default defineConfig({
|
|
plugins: [react()],
|
|
server: {
|
|
port: 3000,
|
|
proxy: {
|
|
'/api': {
|
|
target: 'http://localhost:8000',
|
|
changeOrigin: true,
|
|
},
|
|
'/ws': {
|
|
target: 'ws://localhost:8000',
|
|
ws: true,
|
|
},
|
|
'/openclaw': {
|
|
target: 'http://localhost:8000',
|
|
changeOrigin: true,
|
|
ws: true,
|
|
},
|
|
},
|
|
},
|
|
build: {
|
|
rollupOptions: {
|
|
output: {
|
|
manualChunks(id) {
|
|
// Monaco Editor — only used by Scenarios page, cleanly isolated.
|
|
if (id.includes('@monaco-editor') || id.includes('monaco-editor')) {
|
|
return 'vendor-monaco'
|
|
}
|
|
// Ant Design core — used everywhere, one-way deps (no circular chunk).
|
|
if (id.includes('antd') || id.includes('@ant-design/icons')) {
|
|
return 'vendor-antd'
|
|
}
|
|
// 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'
|
|
}
|
|
},
|
|
},
|
|
},
|
|
},
|
|
}) |