Tree Shaking 在 Vite 中需依赖 ESM 语法、sideEffects 声明、manualChunks 分块及 rollup-plugin-visualizer 验证等多重配合才能生效，非简单开关。
Tree Shaking 在 Vite 中不是“开启就生效”的开关，而是依赖一整套工程化前提和主动设计才能真正落地的体积优化机制。它在 Vite 5.x+ 的构建流程中，天然嵌入 Rollup 生产构建阶段（第二阶段），但要达到极致效果，必须从代码写法、依赖选型、配置声明到分块策略层层配合。
确保 ES 模块语法与无副作用声明
Tree Shaking 的基础是静态可分析性。Vite（底层 Rollup）只能对 ESM 形式导出/导入 做准确标记，CommonJS 或动态 require 会直接阻断分析链。
- 项目内所有模块统一使用
import/export，禁用require和module.exports - 第三方库优先选用原生 ESM 版本（如
lodash-es而非lodash），避免因 CJS 包导致整个模块被保留 - 在
package.json中显式声明"sideEffects": false（全项目无副作用），或按需列出有副作用的文件（如["*.css", "src/styles/*.js"]）
利用 Vite 的 manualChunks 实现精准裁剪
默认自动分块常把业务逻辑、UI 组件、工具函数混进同一 chunk，首屏加载冗余代码。手动分块能将 Tree Shaking 效果“放大”到 chunk 级别。
- 把高频复用但低变更率的依赖（如
vue、pinia、axios）单独抽为runtime或vendorchunk - 按功能域拆分：例如
ui（组件库）、utils（工具函数）、api（请求封装），每个 domain 内部再受益于 Tree Shaking - 示例配置中，
id.includes('node_modules')只是起点；更进一步可匹配/node_modules\/@vue\/.*\.js$/单独提取 Vue 生态模块
结合依赖分析插件验证与定位瓶颈
Tree Shaking 是否真起作用，不能靠猜测。Vite 生态推荐 rollup-plugin-visualizer，它生成交互式 treemap 图，直观显示每个模块的实际打包体积及引用路径。
立即学习“Java免费学习笔记（深入）”；
- 运行
vite build --report后打开 HTML 报告，观察哪些大体积模块未被摇掉（比如整个moment被引入却只用了format） - 点击模块可查看“谁引用了它”，反向检查是否因某处
import * as xxx或默认导出误用导致整包保留 - 发现
lodash占比高？立刻替换为lodash-es并改用具名导入：import { debounce } from 'lodash-es'
规避常见干扰项：动态导入与副作用陷阱
即使语法合规，某些写法也会让 Tree Shaking “失明”。Vite 不会执行代码，只做静态扫描，因此以下情况需特别注意：
- 避免
import()动态导入时传入变量或拼接字符串（如import(`./pages/${name}.vue`)），这会让模块无法被静态识别 - 不要在导出对象上附加运行时属性（如
export const utils = { a: fnA }; utils.b = fnB;），后者不会被识别为导出，也无法被摇掉 - 慎用
eval、with、Function构造函数等破坏静态分析的语法，它们会使所在模块被标记为“不可摇”
