JavaScript 中的树抖动是什么？-猿码集

1. 什么是树抖动？

在了解 JavaScript 中的树抖动之前，我们需要先了解什么是“树”以及“抖动”。

1.1 树（Tree）

树（Tree）是一种抽象数据类型（ADT）或是实现该抽象数据类型的数据结构，用来模拟具有树状结构性质的数据集合。

树类似于现实世界中的树，由一个根节点（root）和数个子节点组成。子节点可以有自己的子节点，这样就形成了一个层次结构。

在 JavaScript 中，我们可以使用对象来表示树的结构。一个对象可以拥有多个属性，每个属性可能指向一个嵌套的对象，以此类推，形成一个树形结构。


let tree = {
    name: 'root',
    children: [
        {
            name: 'child1',
            children: []
        },
        {
            name: 'child2',
            children: [
                {
                    name: 'grandchild',
                    children: []
                }
            ]
        }
    ]
};

1.2 抖动（Jitter）

抖动（Jitter）是一种闪烁或者晃动的效果，由于某种不稳定的因素引起的。在浏览器开发中，抖动通常指某个元素在页面中频繁地变化位置，这种现象可能给用户造成视觉上的不适，同时还会导致页面性能问题。

1.3 树抖动（Tree Shaking）

树抖动（Tree Shaking）是一种 JavaScript 代码优化技术，通过静态分析代码中哪些代码可以被执行，将未被使用的代码从最终的打包文件中移除，从而减小打包文件的大小。

在 Web 应用中，树抖动主要用于优化 JavaScript 应用程序的大小和性能。由于我们常常将许多库和框架包含在我们的应用程序中，因此树抖动可以减少下载的数据量，从而提高应用程序下载和运行的速度。

2. 为什么要进行树抖动？

众所周知，JavaScript 是一种解释性语言，这意味着浏览器在解析页面时会逐行执行 JavaScript 代码。这会导致在加载大量 JavaScript 代码时，页面加载时间变慢，运行速度变慢，甚至会引发性能问题。

树抖动可以通过检测 JavaScript 代码中未被使用的部分，将其从最终的打包文件中移除，从而优化 JavaScript 代码的大小和性能，减少页面加载时间和提高运行速度。

3. 树抖动的原理是什么？

在 Webpack 构建工具中，树抖动的原理是通过 ES6 的模块（Module）机制来实现的。模块提供了一种静态分析 JavaScript 代码的方法，只有真正用到的模块才会被加载到内存中。

从 Webpack 2.x 开始，树抖动（Tree Shaking）默认开启，确保在使用 ES6 模块语法时，所有未用到的代码都会被自动排除掉。

在使用树抖动功能时，需要满足以下三个条件：

必须使用 ES6 模块语法（import 和 export）。

必须使用静态引用，即使用字面量（{}、[]、'hello' 等）或变量引用（import foo from 'foo'）导入的模块。

必须在 Webpack 配置文件中开启树抖动功能。

4. 如何开启树抖动功能？

开启树抖动功能很简单，只要在 Webpack 配置文件中通过 mode 或 optimization 属性开启即可。

4.1 mode 属性

在 Webpack 4.x 版本中，可以通过 mode 属性开启树抖动。mode 属性接受以下三个值：

development: 开发模式，不会执行树抖动。

production: 生产模式，会执行树抖动，最终生成的文件大小更小。

none: 无模式，不会执行任何优化，可用于调试 Webpack 的配置。


// webpack.config.js
module.exports = {
  mode: 'production',
};

4.2 optimization 属性

在 Webpack 4.x 版本之前，需要通过 optimization 属性开启树抖动功能。


// webpack.config.js
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
  entry: './app.js',
  output: {
    filename: 'bundle.js'
  },
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        sourceMap: true,
      }),
    ],
    usedExports: true,
  },
};

通过以上配置，将会开启树抖动功能，并使用 UglifyJs 插件对代码进行压缩。

5. 总结

树抖动是一种用于优化 JavaScript 代码的技术，通过检测 JavaScript 代码中未被使用的部分，将其从最终的打包文件中移除，从而减小打包文件的大小，达到优化性能的目的。

在 Webpack 构建工具中，树抖动的原理是通过 ES6 的模块机制来实现的。只有使用 ES6 模块语法，同时使用静态引用，才能够开启树抖动功能。在 Webpack 配置文件中，可通过 mode 或 optimization 属性开启树抖动功能。

JavaScript 中的树抖动是什么？