随着网页应用程序变得越来越复杂，前端资源的体积也愈发庞大。在这种情况下，优化程序包的大小，以加快页面的加载速度，变得尤为重要。
Webpack 是一个出色的 JavaScript 打包器，它提供了许多功能来优化和压缩最终生成的代码。其中一个重要的优化技术就是 Tree Shaking。本篇文章将介绍什么是 Tree Shaking，如何在 Webpack 中使用它来优化打包后的体积。
什么是 Tree Shaking？
Tree Shaking 是一种优化技术，它可以在打包过程中，消除未使用的代码。这样可以减少程序包的大小，提高应用程序的性能。在静态语言中，这个过程也被称为“死代码消除”。
Tree Shaking 的原理是，通过静态分析代码中的依赖关系，找出那些没有被引用到的模块，然后在最终生成的代码中，剔除这些没有被使用的模块或代码。这样可以防止不必要的代码进入到最终生成的文件中，从而减少文件体积、减轻运行时的开销。
如何在 Webpack 中使用 Tree Shaking？
由于 Tree Shaking 是 Webpack 的内置功能，因此只需要通过简单的配置和一些注意事项，就可以启用它来优化打包后的体积。
1. 配置工程
首先，确保在 package.json 中引入了 Webpack 4 或更高版本。
------------------ - ---------- -------- -
接着，在 Webpack 的配置文件中设置 mode 为 “production”。这将启用 Webpack 的一些内置优化功能。
-- ----------------- -------------- - - ----- ------------- -- --- --
2. 确保使用 ES6 模块语法
Tree Shaking 只能对 ES6 模块语法进行有效的消除。如果你的代码中还有使用 CommonJS 或 AMD 的语法，就不能保证能够获得足够的优化效果。因此，在使用 Tree Shaking 之前，请确保你的代码已经使用了 ES6 模块语法。
3. 使用 Babel 转换代码
如果你在项目中使用了 Babel 来将 ES6 转换为 ES5，你需要使用几个插件来确保你的代码在转换时不会损失 Tree Shaking 的效果。
Babel 有两个插件专门用于支持 Tree Shaking：
babel-plugin-transform-es2015-modules-commonjs插件会将 ES6 模块语法转换为 CommonJS 语法。因此，你需要使用babel-plugin-transform-es2015-modules-commonjs插件来确保在转换后，ES6 模块语法能够被正确地解析。
-- -------- - ---------- ------ ---------- ------------------------------------- -
babel-plugin-transform-dead-code-elimination插件会从代码中删除未使用的模块或变量。你需要确保使用了该插件，并且它已经在babel-preset-env中设置为默认值。
-- --------
-
---------- -
------- -
-------------- -----
---------- -----
--
-
-useBuiltIns 选项是告诉 Babel 是否启用 Polyfill。modules 选项设置为 false，告诉 Babel，你的代码已经使用了 ES6 模块语法，而不必再将其转换为 CommonJS 语法。
4. 设置 Webpack 配置
最后，在 Webpack 配置文件中启用 Tree Shaking。
-- -----------------
-------------- - -
----- -------------
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- ---------------
--
--
--
--
------------- -
------------ -----
--
-- ---
--usedExports 选项是 Webpack 中启用 Tree Shaking 的关键。这个设置告诉 Webpack 打包时只导出被使用的代码。在 optimization 配置中设置该选项为 true 即可开启 Tree Shaking。
示例代码
下面是一个简单的示例代码，演示如何使用 Webpack 中的 Tree Shaking 消除未使用的代码。
-- -------- ------ - ---- ----- - ---- ------------ ------------------ ---- -- - ------ --- -- -------
-- ------- ------ -------- ------ -- - ------ - - -- - ------ -------- -------- -- - ------ - - -- -
运行 npm run build 命令，生成的打包文件中，已经消除了未使用的 times 变量。
结论
使用 Tree Shaking 可以在打包编译过程中消除未使用的代码，从而最大限度地减少应用程序的体积。在 Webpack 中使用 Tree Shaking 也很容易，只需要按照上述步骤配置工程即可。
当然，Tree Shaking 只是 Webpack 中的一种代码优化技术。如果你想要更深入地了解 Webpack 的优化和高级配置，可以参考 Webpack 官方文档或者相关的教程。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66f7da30c5c563ced5aed9a1