Tree Shaking 生效需代码（ESM语法、无副作用）、配置（生产模式、usedExports等）与依赖（原生ESM库、按需引入）协同；否则静态分析失效，死代码无法移除。
Tree Shaking 要真正生效，不是靠工具自动“开个开关”就行，而是依赖代码写法、构建配置和依赖管理三者协同。它本质是静态分析 + 死代码标记 + 压缩移除的过程，现代打包工具（Webpack、Rollup、Vite）都支持，但效果差异主要来自你是否满足它的前提条件。
必须用 ES 模块语法
Tree Shaking 只对 static import/export 有效。CommonJS（require/module.exports）或动态 import() 无法被静态判定，整块模块会被保留。
- 所有本地文件统一用
export const fn = () => {}和import { fn } from './x' - 避免在 ESM 文件里混用
require()，哪怕只有一行，也会中断分析链 - 第三方库若只有 CommonJS 版本（如老版 lodash），需插件转换，但转换后大概率丢失可摇性；优先选原生 ESM 库（看 package.json 是否有
"type": "module"或"exports"字段）
副作用必须显式声明
模块执行时如果做了“除了导出之外的事”，比如注入样式、改全局对象、调用 API，打包工具会保守保留整个文件——哪怕你只导入了一个函数。
- 无副作用的库，在
package.json中设"sideEffects": false - 只有部分文件有副作用（如
./styles/index.css或./polyfill.js），就精确列出："sideEffects": ["*.css", "./polyfill.js"] - 避免在模块顶层写执行语句，例如
console.log('init')、Element.prototype.extend = ...
导入方式直接影响能否摇掉
即使配置全对，错的写法也会让未用代码“赖着不走”。
立即学习“Java免费学习笔记（深入）”；
- 别全量导入：
import _ from 'lodash'→ 改用import debounce from 'lodash-es/debounce' - 优先使用支持 ESM 的替代库，比如
lodash-es、date-fns，而非lodash或moment - 组件库按需引入：Ant Design 推荐
babel-plugin-import，或者直接用antd/es/button这类 ESM 路径
构建配置要启用关键优化项
工具默认不一定全开，尤其 Webpack 需手动确认。
- 确保是
mode: 'production'，它会自动启用usedExports、minimize等 - Webpack 中建议显式配置：
optimization.usedExports: true（标记未使用导出）、concatenateModules: true（作用域提升，辅助摇树） - Rollup 默认开启 Tree Shaking，但输出格式必须是
format: 'es'，不能用'cjs' - 最终产物用
source-map-explorer或rollup-plugin-visualizer查看哪些代码没被摇掉，针对性修复
