Vite 代码分割与 chunk

说明动态 import 如何产生异步 chunk，以及首屏与缓存策略下的拆包原则。

#concept #growing #frontend #javascript

[!info] related notes

所属：构建与优化 MOC

前置：生产构建

后续：构建分析

Vite 代码分割与 chunk

这个概念为什么出现

把 ECharts、PDF 预览、管理员页面塞进主包，会让只想登录入库的用户也下载重型代码。代码分割把非首屏能力延后加载。

[!abstract] 一句话理解动态 import() 提供异步边界，Vite 可据此拆分 chunk；最终是否独立输出还受其他导入和构建配置影响。

最小示例

场景：报表页才加载图表库

// Vue Router 路由配置片段
{
  path: '/reports',
  component: () => import('../pages/StockReportPage.vue'),
}

// 页面内二次拆分
export async function renderChart(el: HTMLElement, data: number[]) {
  const echarts = await import('echarts')
  const chart = echarts.init(el)
  chart.setOption({
    xAxis: { type: 'category' },
    yAxis: { type: 'value' },
    series: [{ type: 'line', data }],
  })
  return chart
}

调用方需给容器设置尺寸，并在卸载时 chart.dispose()。检查构建结果与 Network，确认依赖是否延后加载：同一模块若也从入口静态导入，单加动态 import 不会把它从首屏移走；预加载或提前调用也会提早下载。

原则

先测再拆
路由级拆分优先
避免过度碎片（HTTP 请求与压缩率权衡）
Vite 8 新配置使用 build.rolldownOptions.output.codeSplitting；旧 manualChunks 对象形式已移除，函数形式弃用。手动分组可能改变加载与副作用执行顺序，应实测

本节总结

拆包服务首屏与缓存，不是越碎越专业。

自测题

什么时候应避免在入口静态导入 ECharts？

参考答案

首屏不需要图表时，入口同步依赖让不打开报表的用户也承担下载成本；首屏必需的图表静态导入则可能合理。