⚡ 30 秒速记
- 核心判断：构建工具从入口解析依赖图，经转换和优化生成可在目标运行时加载的模块与资源
- 原理主线：围绕 「Tree Shaking」、「sideEffects」、「写在最后」 建立输入、状态变化与输出之间的因果关系
- 文章范围：讲解了 Webpack 的 Tree Shaking 和 sideEffects 特性，分析其原理、配置方法及在前端项目中的实际应用，帮助开发者理解如何通过移除未引用代码和合理配置 sideEffects 字段，实现更小的打包体积和更高效的
- 边界与代价：静态分析受模块语法、动态依赖和副作用声明限制；拆包过细也会增加请求和运行时成本
- 工程落地：优化前先测构建阶段、产物组成和缓存命中，再针对解析、转换、压缩或运行时逐层处理
Tree Shaking 会标记并移除未使用的导出，而 sideEffects 用来告诉 Webpack 哪些模块不能因未被引用就整段删除。 它依赖静态的 ES Modules，通常由 usedExports 配合代码压缩完成，生产模式会自动启用相关优化。若 Babel 把模块转成 CommonJS，静态分析就可能失效，因此一般将 @babel/preset-env 的 modules 设为 false。对含全局样式或初始化逻辑的模块，不能误标为无副作用。
这篇文章不要按 API 清单来背。先用上面的 Mind Map 建立全局结构，再通过交互 DEMO 观察正常路径和边界路径如何改变状态；阅读正文时重点核对每一步的输入、负责执行的参与者、产生的中间状态以及最终可观察结果。遇到版本敏感结论，要把“历史实现”“当前行为”和“工程兼容策略”分开说明；遇到性能或架构取舍，则用实际指标、失败现象和验证手段支撑判断。
版本校准： 旧文中的 webpack 4、JSONP 更新清单或 react-hot-loader 代码用于解释历史链路，不应直接复制到新项目。当前 webpack-dev-server 4+ 默认启用 HMR，严格 ESM 可使用 import.meta.webpackHot；生产环境不得携带 HMR runtime。以 webpack HMR 官方指南 和项目锁定版本为准。
# Tree Shaking
Tree Shaking 翻译过来的意思就是“摇树”。伴随着摇树的动作，树上的枯树枝和树叶就会掉落下来。
我们这里要介绍的 Tree-shaking 也是同样的道理，不过通过 Tree-shaking “摇掉”的是代码中那些没有用到的部分，这部分没有用的代码更专业的说法应该叫作未引用代码（dead-code）。
Tree-shaking 最早是 Rollup 工具中推出的一个特性，Webpack 从 2.0 过后开始支持这个特性。
我们使用 Webpack 生产模式打包过程中，就会自动开启这个功能，以此来检测我们代码中的未引用代码，然后自动移除它们，从而达到对打包结果的优化。
