webpack-tree-shaking

tree-shaking

通常用来移除，代码中未被引用的代码，他依赖 es6的 import 和 export 语法，只有文件内的模块引用导出全是es6 语法才能使用

为什么依赖 es6的 import 和 export 呢？

动态结构

当前的JavaScript模块格式具有动态结构:在导入和导出的内容可以在运行时更改。

静态结构

     这意味着您可以在编译时(静态地)确定导入和导出—只需查看源代码，不必执行它。并且ES6从语法上加强了这一点:您只能在顶层导入和导出(绝不能嵌套在条件语句中)。导入和导出语句没有动态部分(不允许有变量等)。

静态结构vs动态结构

消除没有引用的代码

导入是导出的只读视图，不必赋值导出，可以会直接引用他们

快速查找到对应的导出，es5导出的一版是一个对象，使用的时候需要通过属性查找

配置

将文件标记为无副作用，来触发webpack的tree-shaking

在package.json 中增加 " sideEffects" 字段

// 全部文件都无副作用
{
  "name": "your-project",
  "sideEffects": false
}
// 指定文件
{
 "sideEffects": [ 
    "./src/some-side-effectful-file.js"
  ]
}
// 在 webpack module.rules 中配置，可以用来按需导入
module.rules: [
  {
    include: path.resolve("node_modules", "lodash"),
    sideEffects: false
  }
]

结论

为了学会使用 tree shaking，你必须……

• 使用 ES2015 模块语法（即 import 和 export）。
• 在项目 package.json 文件中，添加一个 "sideEffects" 入口。
• 引入一个能够删除未引用代码(dead code)的压缩工具(minifier)（例如 UglifyJSPlugin）