Tree-shaking 是减小打包体积的关键技术，依赖静态分析剔除未使用的导出。本文简述实现要点与限制。
要点
- 保持 ES module（静态 import/export）以便构建工具进行分析。
- 避免动态导入或副作用模块阻止摇树优化。
工程实践
- 检查第三方库的模块格式，优先使用 ESM 入口。
结论
通过规范模块化与依赖审查，可以显著减少最终 bundle 体积并提升加载性能。
初步纲要
Tree-shaking 是通过静态分析消除未使用代码的一种优化。它依赖于 ES module 的静态结构，因此编写可摇树的代码与正确配置打包工具同等重要。
如何写出可摇树代码
- 优先使用 ES module (
export/import) 而非 CommonJS (module.exports)；静态导入便于 bundler 做分析。 - 避免模块在顶层副作用（副作用会阻止 tree-shaking），对有副作用的模块在
package.json中标注"sideEffects": ["*.css"]等。
Bundler 配置要点
- 在 Rollup / Vite / webpack 中确保开启 production 模式与 minifier（如 terser）配合 tree-shaking 使用。
- 检查第三方依赖是否以 ESM 发布或提供 ESM 入口；对于只提供 CJS 的包，tree-shaking 效果会受限。
验证与回归检测
- 使用 bundle 分析工具（
rollup-plugin-visualizer、webpack-bundle-analyzer）查看打包后的模块图，确认未使用导出被移除。
相关链接：