tree shaking 依赖 es 模块静态分析标记未使用导出，由 terser 删除；需用 import/export、禁用副作用、生产模式构建并验证标记与产物。
Webpack 的 Tree Shaking 本身不直接“剔除”代码，而是通过 ES 模块的静态结构（import/export）识别并标记未被引用的导出，再由压缩工具（如 Terser）真正移除这些死代码。要让它生效，关键不在 Webpack 配置本身，而在于你的代码写法和构建链路是否满足前提条件。
确保使用 ES Module 语法
Tree Shaking 只对 import/export 生效，CommonJS（require/module.exports）无法静态分析，会被整个模块保留。
- 把工具库（如 Lodash）换成支持 ESM 的版本，例如用
lodash-es而不是lodash - 避免混用
import和require；项目中统一用export而非module.exports - 不要动态导入（
import(...)）或运行时判断导出，这会让静态分析失效
关闭副作用（sideEffects）干扰
即使某个模块没被显式引用，如果 Webpack 认为它有“副作用”，就不会剔除它。比如某些 CSS 文件、polyfill 或带执行逻辑的模块，默认会被保留。
- 在
package.json中明确声明："sideEffects": false（表示整个包无副作用） - 若只有部分文件有副作用（如
./src/styles.css），可写成："sideEffects": ["*.css", "*.scss"] - 避免在模块顶层写执行语句（如
console.log、localStorage.setItem），否则会被视为副作用
启用生产模式并保留未使用的导出标记
Webpack 5 默认开启 Tree Shaking，但需配合正确环境和压缩配置才能真正删掉代码。
- 确保构建命令是
webpack --mode=production（开发模式下不会触发剔除） - 不要设置
optimization.usedExports: false，保持默认true（标记未使用导出） - Terser 插件会读取这些标记并删除对应代码，无需额外配置，但不要禁用
minimize: true
验证是否生效
光靠打包体积变化不够可靠，建议结合源码映射和产物分析确认。
- 用
webpack --mode=production --stats=verbose查看usedExports是否为true，以及哪些导出被标记为unused - 生成 bundle 分析报告：
webpack --mode=production --stats=normal --json > stats.json，再用 webpack-bundle-analyzer 可视化查看 - 检查最终 JS 文件里是否还存在明显未调用的函数或类（如
function utilsHelper() {...}且没被引用）
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
