本文代码github地址：戳我

tree shaking

官方文档这样子说： "tree shaking 是一个术语，通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code) 通过 package.json 的 "sideEffects" 属性作为标记，向 compiler 提供提示，表明项目中的哪些文件是 "pure(纯的 ES2015 模块)"，由此可以安全地删除文件中未使用的部分。"

其实说白了就是一个可以减小打包文件体积的配置，并且引入却未使用的代码会降低亮度。比如我在配置前 /dist/app.bundle.js 的文件大小是106kb，配置后是71.4kb，看起来之后30多kb 的差距，但是这也减少了30% 的大小。

启用这个配置很简单。 package.json

{
  name: "项目名称",
  "sideEffects": false,
  ...
}

设置完之后再设置 mode 切换到压缩输出 webpack.config.js

module.exports = {
  ...
  mode: "production"
  ...
}

再执行 npm run build 这是后发现样式表没有了。 “注意，任何导入的文件都会受到 tree shaking 的影响。这意味着，如果在项目中使用类似 css-loader 并导入 CSS 文件，则需要将其添加到 side effect 列表中，以免在生产模式中无意中将它删除”

所以再修改一下package.json

  ...
  "sideEffects": [
    "*.css"
  ]
  ...

再次打包就可以了。

webpack 从零开始 -06 -tree shaking

tree shaking