Webpack 中的 Tree Shaking

Tree Shaking

Tree shaking 用于描述移除JavaScript上下文中的未引用代码(dead-code)。

为了更方便地理解tree shaking，我们可以将应用程序想象成一棵树。

绿色表示实际用到的 source code(源码) 和 library(库)，是树上活的树叶。

灰色表示未引用代码，是秋天树上枯萎的树叶。

为了除去死去的树叶，你必须摇动这棵树（shake this tree），使它们落下。

如何使用

• 使用 ES2015 模块语法(即 import 和 export )
• 确保没有compiler将ES2015模块语法转换为CommonJS模块(即 require )
• 在 package.json 文件中，添加 sideEffects 属性，表示有副作用的模块文件，使用false 表示所有模块文件均无副作用
• 通过将 mode 选项设置为 production，启用 minification (代码压缩) 和 tree shaking

副作用

在导入时会执行特殊行为的代码，而不是仅仅暴露一个 export 或多个 export。

举例说明，例如 polyfill，它影响全局作用域（在各类的 prototype 中加入方法），并且通常不提供 export。

或者使用 css-loader 然后 import css文件，虽然引入后并没有进行使用，但是这些css文件是有副作用的(修改样式)。

因此对于这种有副作用的模块，即使未被使用，也不能将其删除。

sideEffects

// 所有模块均无副作用
{
  "name": "your-project",
  "sideEffects": false
}

// 声明有副作用的模块
{
  "name": "your-project",
  "sideEffects": [
    "./src/some-side-effectful-file.js",
    "*.css"
  ]
}

参考链接：

https://webpack.docschina.org/guides/tree-shaking/