Vite生产构建中代码分块默认启用，需通过动态import()、manualChunks配置、sourcemap与压缩优化、common chunk精简及最小chunk大小限制来主动控制分块策略。
在 Vite 生产构建中，代码分块（Code Splitting）默认已由 Rollup（Vite 底层打包器）自动处理，但要真正优化分块效果、减小首屏体积、提升加载性能，需主动配置和干预。关键不在于“开启分块”，而在于“控制分块逻辑”和“引导分块策略”。
利用动态 import() 显式定义分割点
Vite 会将 import() 表达式自动转为异步加载的 chunk，这是最直接、最可控的分块方式。适合路由、条件性功能、大型第三方库等场景。
- 路由级分块（配合 Vue Router 或 React Router）：
const Home = () => import('./views/Home.vue')→ 生成独立Home.***.js - 按需加载重型依赖：
const { parse } = await import('papaparse')→papaparse不会打进主包 - 避免写成
import * as xxx from 'xxx'静态导入，否则会被打入主 chunk
配置 build.rollupOptions.output.manualChunks
用于对 node_modules 中的模块进行自定义归组，解决“多个页面共用同一库却各自打包”的冗余问题。
- 把高频共用库（如
vue、lodash-es、axios）抽成单独 vendor chunk：manualChunks: { vendor: ['vue', 'vue-router', 'pinia', 'axios'], lodash: ['lodash-es'], } - 按包大小阈值合并小模块（防止 chunk 过碎）：
可结合getManualChunk函数，统计模块路径和大小后归类 - 注意：不要把业务模块写进
manualChunks，它只适用于node_modules或明确共享的工具库
启用 build.sourcemap: false 和 build.minify: 'terser'
虽然不直接改变分块结构，但影响最终 chunk 体积与加载效率：
立即学习“Java免费学习笔记（深入）”；
-
sourcemap: false（生产环境默认）→ 避免生成额外.js.map文件，减少请求数和部署体积 -
minify: 'terser'→ 比 esbuild 默认压缩更激进（支持 mangling、dead-code elimination），尤其利于多 chunk 场景下的重复代码消除 - 可进一步配
terserOptions.compress.drop_console: true移除 console（需确认是否合规）
检查并精简 common chunk 的生成逻辑
Vite/Rollup 默认会提取被 ≥2 个入口引用的模块为 common chunk。有时这反而导致“本该专属的组件被拉进 common”，稀释了缓存优势。
- 查看构建产物中的
dist/assets/目录，用vite-bundle-visualizer插件分析 chunk 构成 - 若发现某个业务组件意外出现在
common-***.js，可加/* @__PURE__ */注释或改用动态 import 隔离 - 设置
build.rollupOptions.output.experimentalMinChunkSize（Vite ≥5.2）限制最小 chunk 大小，避免过小 chunk 被拆出
