什么是 Tree Shaking？为什么需要它？

我已经开始学习 Angular 2，并且遇到了“tree shake”这个术语，但我无法从初学者的角度找到任何好的解释。

我在这里有两个问题：

1. 什么是 Tree Shaking？为什么需要它？
2. 我该如何使用它？

我看到你在这里有三个问题；1.什么是摇树？ 2.有什么必要？ 3. 那么，如何使用它呢？

1. 什么是树摇动？

摇树指的是死代码消除。这意味着在构建过程中未使用的模块将不会包含在捆绑包中。

When we import and export大多数时候，JavaScript 中的模块 周围有未使用的代码。排除未使用的代码（也 称为死代码）被称为树摇动.

利用树摇动和死代码消除可以显着减少应用程序中的代码大小。我们通过网络发送的代码越少，应用程序的性能就越高。

2. 什么情况需要摇树？

Tree Shaking 帮助我们减轻应用程序的重量。例如，如果我们只想创建一个“Hello World”应用在AngularJs 2那么大约需要 2.5MB，但是通过 Tree Shaking，我们可以将大小减小到只有几百 KB，或者可能是几 MB。

3. 如何使用/实现Tree Shaking？

类似的工具webpack https://webpack.js.org将检测死代码并将其标记为“未使用的模块”，但不会删除代码。 Webpack 依靠压缩器来清理死代码，其中之一是UglifyJS https://webpack.js.org/plugins/uglifyjs-webpack-plugin/插件，它将消除捆绑包中的死代码。

// modules.js
export function drive(props) {
 return props.gas
}

export function fly(props) {
 return props.miles 
}

// main.js
import { drive } from modules;

/// some code
eventHandler = (event) => {
  event.preventDefault()
  drive({ gas: event.target.value })
}
/// some code

// fly() was never importent and won't be included in our bundle

它仅适用于import and export。它不适用于 CommonJSrequire syntax.

这同样适用于 npm 依赖项。很好的例子是 lodash，只是import pick from 'lodash/pick'并且您的捆绑包将仅包含一个小模块，而不是整个 lodash 库。