Vite 对大体量 SPA 的按需分包依赖 ESM + 动态 import() + 构建时自动代码分割，每个 import() 触发独立 chunk，支持路由级分包、功能模块懒加载，并可通过 optimizeDeps、rollupOptions 和插件精细控制分包策略。
Vite 对大体量单页面应用（SPA）的按需分包，核心依赖其原生 ES 模块（ESM）加载机制 + 动态 import() + 构建时自动代码分割，而非传统 Webpack 的 bundle 分析器。它不靠运行时 loader，而是靠静态分析与显式异步导入触发分包。
动态 import() 是分包的入口开关
Vite 会把每个 import() 调用（返回 Promise）识别为一个独立 chunk，自动提取其中的模块及其依赖树，生成单独的 JS 文件（如 chunk.abc123.js）。只要不是顶层同步导入，Vite 就不会把它打进主包。
- 路由级分包：配合前端路由（如 Vue Router / React Router），用
component: () => import('./views/Dashboard.vue')即可让该视图及其子组件、工具函数、样式全部隔离打包 - 功能模块懒加载：例如编辑器插件、图表库、PDF 渲染器等重型依赖，只在用户点击或条件满足时才
import()，避免首屏加载压力 - 注意：不能对变量或表达式动态拼接路径（如
import(`./modules/${name}.js`)），Vite 需要静态可分析的字符串字面量才能生成 chunk
手动配置 optimizeDeps 和 build.rollupOptions 细化控制
默认情况下 Vite 已做合理优化，但超大型 SPA 可能需要干预：
-
optimizeDeps.include：将高频共用但未被直接
import的包（如lodash-es中的多个函数）提前预构建并内联，减少运行时 HTTP 请求数 -
build.rollupOptions.output.manualChunks：按模块路径或依赖关系自定义分组，例如把所有
echarts相关模块打到charts.js，把 UI 组件库（如@ant-design/icons）单独抽离 -
build.rollupOptions.external：对已通过 CDN 加载的全局库（如
moment或three）标记为 external，跳过打包，减小产出体积
利用 Vite 插件增强分包策略
官方插件生态提供更精细的分包能力：
立即学习“Java免费学习笔记（深入）”；
-
vite-plugin-splitting：基于模块引用关系自动拆分 vendor、runtime、shared 等逻辑块，适合多页面/微前端场景 -
@vitejs/plugin-dynamic-import-vars：有限支持带变量的import()（如import.meta.glob('./icons/*.svg')），生成一组预定义的异步导入函数，仍保持可分析性 - 自定义插件可通过
transform钩子识别特定注释（如// @split-chunk）并注入import()，实现声明式分包
验证与调试分包效果
构建后别只看 dist 大小，重点检查实际加载行为：
- 运行
vite build --report生成report.html，查看各 chunk 的组成、大小、引用关系 - 启动生产服务器（
vite preview），打开浏览器 Network 面板，切换路由或触发功能，观察是否只加载对应 chunk - 检查生成的
manifest.json（若启用build.manifest），确认资源映射与加载时机是否符合预期
