tree shaking 是一个术语，通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。

直观的理解，你可以将应用程序想象成一棵树。绿色表示实际用到的源码和 library，是树上活的树叶。灰色表示无用的代码，是秋天树上枯萎的树叶。为了除去死去的树叶，你必须摇动这棵树，使它们落下。

tree shaking 配置要有效，需要同时满足以下3点

使用 ES2015 模块语法（即 import 和 export）

tree shaking依赖于 ES2015 模块系统中的静态结构特性，例如 import 和 export，如果不是通过ES2015导出的库，则tree shaking无效。

假如有这样一个库math.js，里面有两个方法square和cube，必须要通过export导出，当然有时候我们通过export default导出，但是这两种导出的处理不同

export function square(x) {
    console.log('square')
    return x * x;
}

export function cube(x) {
    console.log('cube')
    return x * x * x;
}

export default {
    square,cube
}

如在入口文件index.js 中引入math中的square方法，有以下两种方式

方式1：只引入我们需要的方法，这种方式是有效的

import {square} from './math'
console.log(square(3))

方式2：引入整个库，通过math.square进行调用，这种方式是无效的

//无效的tree shaking
import math from './math'
console.log(math.square(3))

在 package.json 文件中，添加 "sideEffects" 

新的 webpack 4 正式版本，扩展了这个检测能力，通过 package.json 的 "sideEffects" 属性作为标记，向 compiler 提供提示，表明项目中的哪些文件是 "pure(纯的 ES2015 模块)"，无副作用的，由此可以安全地删除文件中未使用的部分。

如果所有代码都不包含副作用，我们就可以简单地将该属性标记为 false，来告知 webpack，它可以安全地删除未用到的 export 导出

{
  "name": "your-project",
  "sideEffects": false
}

如果你的代码确实有一些副作用，那么可以改为提供一个数组，特别注意，至少要添加"*.css"，否则在生成环境打包时，会把css代码删除

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

压缩输出

只有通过压缩输出，才会删除无效代码，压缩可以采取多种方式，简单的方式就是将 mode设为"production"

现在，随着 tree shaking 和代码压缩，我们的 打包输出的bundle 减小几个字节！虽然，在这个特定示例中，可能看起来没有减少很多，但是，在具有复杂的依赖树的大型应用程序上运行时，tree shaking 或许会对 bundle 产生显著的体积优化。

-END-