webpack tree shaking 不生效的坑

上菜（坑）

笔者因为想研究打包产物，所以把丑化压缩给关掉了！！ 导致tree shaking 怎么也生效不了！！

• 版本 webpack 4.x

optimization: {
  minimize: true // 此项不能设置为false，否者是导致 tree shaking 失效
},

大坑点：

• webpack的tree shaking，默认只在 使用 mode 为 "production" 的配置项以启用，但是如果配置了不丑化压缩代码，webpack也会默认不是"production"，然后就没开启tree shaking

另外发现

因为笔者一开始没发现这个关键问题，所以一直盯着自己的配置是否有错，额外发现了配置细节

根据官网写的tree shaking需要注意的4点：发现细节（放在笔者注里面）

• 使用 ES2015 模块语法（即 import 和 export）。
• 确保没有编译器将您的 ES2015 模块语法转换为 CommonJS 的（顺带一提，这是现在常用的 @babel/preset-env 的默认行为，详细信息请参阅文档）。
  • （笔者注：babel升级到7后，没有特殊配置，babel默认不会转换掉 ESM 模块语法）
• 在项目的 package.json 文件中，添加 "sideEffects" 属性。
  • （笔者注：默认可以不写sideEffects，如果有需要某些文件不做tree shaking，可以加上）
• 使用 mode 为 "production" 的配置项以启用，包括压缩代码与 tree shaking。

  • （笔者注：不能关闭丑化压缩）

---

新年快乐！