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

Question

我已经开始学习Angular 2并且遇到了这个术语"树摇晃",从初学者的角度来看,我还没有找到任何好的解释.

什么是树摇晃,我为什么需要它？我该如何使用它？

Answer 1

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

Answer 2

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

1.摇什么树？

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

当我们import和exportJavaScript中的模块一起使用时，大多数情况下会有未使用的代码在附近浮动。排除未使用的代码（也称为无效代码）称为树抖动。

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

2.摇树有什么需要？

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

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

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