vite大屏图表按需打包的核心是动态加载与精准分包：1.用import()按需引入图表子模块并注册；2.路由级异步组件拆分；3.通过manualchunks手动分块聚合图表依赖；4.结合环境变量条件编译剔除未启用图表代码。
在 Vite 项目中实现大屏图表按需打包，核心是避免将所有图表库（如 ECharts、AntV/G2、Chart.js）一次性全量引入，而是根据页面或模块动态加载所需图表组件，配合 Vite 的原生 ES 模块能力与代码分割机制，达成体积优化和首屏加速。
1. 使用动态 import() 按需加载图表模块
不直接 import 整个图表库，而是在需要渲染某类图表时，用 import() 动态加载对应子模块或封装好的图表组件：
- ECharts 推荐只加载所需图表类型和主题，例如仅用折线图 + 暗色主题：
// components/LineChart.vue
export default {
async setup() {
const echarts = await import('echarts/core');
const { LineChart } = await import('echarts/charts');
const { GridComponent, TooltipComponent } = await import('echarts/components');
const { CanvasRenderer } = await import('echarts/renderers');
// 注册必要模块（不注册的不会被打包）
echarts.use([LineChart, GridComponent, TooltipComponent, CanvasRenderer]);
return { echarts };
}
};
```
这样 Webpack 或 Vite 会自动为每个 import() 创建独立 chunk，且未访问的图表（如 MapChart、HeatmapChart）完全不会进入构建产物。
2. 基于路由或视图拆分图表组件包
若大屏由多个子页面组成（如「实时监控」「趋势分析」「地理分布」），可为每页单独封装图表逻辑，并利用 Vite 的 路由级代码分割：
- 在
src/views/下为各模块建独立文件夹，图表组件放在对应目录内； - 路由配置使用异步组件写法：
component: () => import('@/views/GeoMap/GeoMapView.vue')； - Vite 默认对
import()返回 Promise 的路径生成独立 chunk，配合rollupOptions.output.manualChunks可进一步控制分包粒度。
3. 配置 Vite 手动分块（manualChunks）精准控制依赖
在 vite.config.ts 中显式定义图表相关 chunk，防止它们被揉进 vendor 或主包：
export default defineConfig({
build: {
rollupOptions: {
output: {
manualChunks: {
echarts: ['echarts/core', 'echarts/charts', 'echarts/components', 'echarts/renderers'],
antv: ['@antv/g2', '@antv/g2plot'],
// 其他图表库同理
}
}
}
}
});
```
该配置确保所有 ECharts 相关模块被打包进同一个 echarts.xxx.js，便于缓存复用，也避免重复引入。
4. 利用条件编译 + 环境变量控制图表开关
对于不同客户定制的大屏版本（如有的要 ECharts，有的只用 Chart.js），可通过环境变量剔除未启用的图表代码：
- 定义
.env.development：VITE_CHART_LIB=echarts； - 组件中用
import.meta.env.VITE_CHART_LIB === 'echarts'控制是否执行对应import()； - Vite 在构建时会静态分析并移除死代码（Tree-shaking 生效），未匹配分支的图表代码不会出现在最终产物中。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
