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

Question

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

我这里有两个问题：

什么是 tree shaking，我为什么需要它？
如何使用它？

Answer 1

这只是意味着您项目中但不在任何地方 used/referenced 的代码将被删除。就像您导入一个完整的库只是为了在其中使用 1 个函数一样。它减少了编译代码的大小。

Answer 2

我看到你在这里有三个问题； 1。什么是摇树？ 2. 有什么需要？ 3. 还有，怎么用？

1。什么是 tree shaking？

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

When we import and export modules in JavaScript, most of the time there is unused code floating around. Excluding that unused code (also referred as dead code) is called tree shaking.

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

2。 tree shaking 需要什么？

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

3。如何使用/实现tree shaking？

像 webpack will detect dead code and mark it as “unused module” but it won’t remove the code. Webpack relies on minifiers to cleanup dead code, one of them is UglifyJS 插件这样的工具，它将从包中删除无效代码。

// 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

It only works with import and export. It won’t work with CommonJS require syntax.

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

Answer 3

Tree Shaking 过程减少应用程序的下载大小
Tree shaking 不导出我们的应用程序不需要的模块，它不会从包中删除未使用的代码 .
Webpack 删除链接 和 UglifyJs 插件删除 代码

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

What is Tree Shaking and Why Would I Need It?

javascript

webpack

tree-shaking

angular

1。什么是 tree shaking？

2。 tree shaking 需要什么？

3。如何使用/实现tree shaking？