[!info] 关联笔记

• 所属：构建与优化 MOC
• 前置：生产构建
• 后续：构建分析

Vite 代码分割与 chunk

这个概念为什么出现

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

[!abstract] 一句话理解 动态 import() 创建异步边界，Rollup/Vite 据此产出可独立缓存的 chunk。

最小示例

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

// 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({ series: [{ type: 'line', data }] })
  return chart
}

构建后应看到独立 async chunk，而不是全进 index-*.js。

原则

1. 先测再拆
2. 路由级拆分优先
3. 避免过度碎片（HTTP 请求与压缩率权衡）
4. manualChunks 谨慎，错误拆分可致重复或空包

本节总结

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

自测题

1. 为什么静态 import echarts 在入口有害？

参考答案

入口同步依赖会进入首屏下载路径，即使用户从不打开报表。