什么是 Tree Shaking
Tree Shaking 是指在打包过程中，通过静态分析代码中的引用关系，消除未被引用的代码。这种消除方式被称为 Dead Code Elimination（DCE），也就是死代码消除。
Tree Shaking 是一个优化 JavaScript 代码的方法，它可以显著减小打包后的文件体积，提高网页的加载速度。在前端开发中，Tree Shaking 已经成为了一个必备的技术。
Tree Shaking 的原理
Tree Shaking 的原理是基于 JavaScript 的模块化语法。在打包过程中，Webpack 会通过静态分析代码中的引用关系，将未被引用的代码从打包结果中消除掉。
在 ES6 中，我们可以使用 import 和 export 语法来定义模块。当我们使用 import 导入一个模块时，Webpack 会将这个模块打包成一个独立的文件，并在打包结果中生成一个对应的引用关系。
在 Tree Shaking 中，Webpack 会通过这个引用关系来判断模块是否被使用。如果模块没有被使用，Webpack 就会将它从打包结果中删除掉。
如何开启 Tree Shaking
在 Webpack 中开启 Tree Shaking 非常简单，我们只需要在配置文件中设置 optimization.usedExports 为 true，即可开启 Tree Shaking。
// webpack.config.js
module.exports = {
optimization: {
usedExports: true
}
};在开启 Tree Shaking 后，我们需要注意一些细节，以确保 Tree Shaking 的正常运行。
首先，我们需要使用 ES6 的模块化语法来定义模块。在使用 CommonJS 或 AMD 等非 ES6 的模块化语法时，Webpack 无法进行静态分析，从而无法进行 Tree Shaking。
其次，我们需要使用 production 模式进行打包。在 development 模式下，Webpack 会生成一些调试相关的代码，这些代码在生产环境中是不需要的，也无法进行 Tree Shaking。
示例代码
下面是一个使用 Tree Shaking 的示例代码。
-- -------------------- ---- ------- -- --------- ------ -------- ------ -- - ------ - - -- - ------ -------- ------ -- - ------ - - -- - -- ------- ------ - --- - ---- ----------- ------------------ ----
在上面的代码中，我们定义了一个模块 module，其中包含了两个函数 add 和 sub。在 main.js 中，我们只使用了 add 函数，而没有使用 sub 函数。
在使用 Tree Shaking 后，Webpack 会将 sub 函数从打包结果中删除掉，从而减小打包后的文件体积。
总结
Tree Shaking 是一个非常有用的优化 JavaScript 代码的方法，它可以显著减小打包后的文件体积，提高网页的加载速度。在开发过程中，我们应该尽可能地使用 ES6 的模块化语法，并开启 production 模式进行打包，以便使用 Tree Shaking 进行优化。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65e3dd721886fbafa401f9cb