什么是树木摇晃，为什么我需要它？

Question

我开始学习Angular 2，并且遇到了这个术语＆＃34;树摇动＆＃34;而且我还没能从初学者那里找到任何好的解释。透视图。

我在这里有两个问题：

1. 什么是树摇晃，我为什么需要它？
2. 我该如何使用它？

Answer 1

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

Answer 2

我看到您在这里有三个问题； 1。什么是摇树？  2.有什么需要？  3.而且，您如何使用它？

1。什么在摇树？

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

  

大多数情况下，当我们在JavaScript中使用import和export模块时   周围有未使用的代码。排除未使用的代码（也   称为死代码）称为摇树。

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

2。摇树有什么需要？

Tree Shaking帮助我们减轻了应用程序的负担。例如，如果我们只想在 AngularJs 2 中创建一个“Hello World”应用程序，则大约需要2.5MB，但是通过摇晃树，我们可以将大小减小到只有几百KB，或几个MB。

3。如何使用/实现摇树？

诸如webpack之类的工具将检测到无效代码并将其标记为“未使用的模块”，但不会删除该代码。 Webpack依靠压缩程序来清理无效代码，其中之一是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

  

仅适用于import和export。它不适用于CommonJS   require语法。

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

Answer 3

? Tree Shaking 过程减少了应用程序的下载大小
? 摇树不将我们的应用程序不需要的模块导出到包文件中，它不会从包中删除未使用的代码。
? Webpack 删除链接，UglifyJs 插件删除代码