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/