用 Webpack 2 与 Babel 6 组合实现 ES6 模块 Tree Shaking 摇树优化，去除无用代码。

方案简介

本方案来自 webpack-china/awesome-webpack-cn 收录的经典组合：使用 Webpack 2 与 Babel 6 进行 Tree-shaking。它解决的问题是：前端项目使用 ES6 模块化开发后，打包产物中往往包含大量未被引用的导出代码。Tree-shaking（摇树优化）利用 ES Module 的静态结构，在打包阶段分析模块导入导出关系，把没有被使用到的代码从最终 bundle 中剔除。

该方案适合使用 ES6 模块语法、希望减小打包文件体积、面向生产环境优化的前端团队。仓库中还收录了多篇配套文章可供深入理解原理，如《Webpack 2 Tree Shaking Configuration》《为什么 WebPack 2 的 Tree Shaking 并不如你想的高效》《【翻译】Webpack 4 Tree Shaking 终极优化指南》《Tree-Shaking性能优化实践 - 原理篇》等，形成从入门到原理的完整学习路径。

亮点与能力

• 基于 ES Module 静态分析剔除未引用的导出代码
• 与 Babel 转译流程结合，兼容现有开发工作流
• 面向生产构建减小打包体积
• 有多篇进阶文章支撑，可深入理解原理与局限

组成与分工

• Webpack 2：模块打包器，负责解析项目依赖关系并生成 bundle，其新增能力使 Tree-shaking 成为可能。
• Babel 6：ES6 语法编译工具，把 ES6+ 代码转译为兼容目标环境的 JavaScript；其模块转换配置直接影响 Tree-shaking 是否生效。
• ES6 Modules：方案的基础前提，只有静态化的 ES Module 导入导出才能被可靠地静态分析并摇除无用代码。

使用与配置要点

• 开发代码必须使用 ES6 的 import/export 语法，避免使用不可静态分析的模块方式
• Babel 转译时需注意模块处理方式与 ES Module 保留的关系，否则 Webpack 无法完成摇树
• 构建后可通过对比 bundle 体积验证 Tree-shaking 是否生效
• 可结合仓库收录的体积优化文章一起阅读，如《彻底解决 webpack 打包文件体积过大》《webpack打包bundle.js体积大小优化》

注意事项与常见问题

• 材料收录的文章明确指出该优化存在局限：《为什么 WebPack 2 的 Tree Shaking 并不如你想的高效》——即实际效果可能低于预期
• Tree-shaking 依赖 ES Module 的静态结构，动态使用导出的代码无法被摇除
• 不同 Babel 配置会影响最终效果，需要结合原理篇文章理解

优缺点

• ✓ 有效减小打包体积
• ✓ 面向模块化开发
• ✕ 受 Babel 转译影响效果有限

出处

本方案挖掘自开源项目 webpack-china/awesome-webpack-cn，方案内容与实施命令均来自其 README 原文。