webpack 中的 tree shaking

参考链接：
https://webpack.docschina.org/guides/tree-shaking/
https://juejin.im/post/6844903544756109319

tree shaking 的基本概念

• 对无用代码进行剔除，以优化项目打包体积，属于性能优化的范畴。
• 支持tree shaking 的构建工具：rollup（最早）、webpack（2开始）

tree shaking 依赖于ES6 的模块特性

ES6 的模块特性：

• 只能作为模块顶层的语句出现
• import 的模块名只能是字符串常量
• import binding 是 immutable 的

ES6模块依赖关系是确定的，和运行时的状态无关，可以进行可靠的静态分析，这是tree-shaking的基础。

所谓静态分析就是不执行代码，从字面量上对代码进行分析，ES6之前的模块化，比如我们可以动态require一个模块，只有执行后才知道引用的什么模块，这个就不能通过静态分析去做优化。

side effect（副作用）

通过 package.json 中的 side effect 属性配置，告知 webpack 哪些代码是“纯粹部分”、那些代码存在副作用。

• 如果代码中的所有代码都没有副作用，可以简单的配置为 sideEffects:false，它可以安全地删除未用到的 export；
• 如果代码确实有一些副作用，可以提供一个数组：

{
    
    
  "name": "your-project",
  "sideEffects": [
    "./src/some-side-effectful-file.js"
  ]
}

注意，所有导入文件都会受到 tree shaking 的影响。这意味着，如果在项目中使用类似 css-loader 并 import 一个 CSS 文件，则需要将其添加到 side effect 列表中，以免在生产模式中无意中将它删除

{
    
    
  "name": "your-project",
  "sideEffects": [
    "./src/some-side-effectful-file.js",
    "*.css"
  ]
}

tree shaking 注意事项

• 使用ES2015(ES6)的模块语法：import、export
• 确保没有编译器将您的 ES2015 模块语法转换为 CommonJS 的，（例如 Babel）
• 在项目的 package.json 文件中，添加 “sideEffects” 属性
• 使用 mode 为 “production” 的配置项以启用更多优化项，包括压缩代码与 Tree Shaking
• 对于某些第三方模块，需要特殊处理，例如 lodash