什么是 Tree Shaking
Tree Shaking 是一种用于优化代码的技术，它可以剔除代码中没有使用的部分，减少代码体积，提高代码的加载速度和执行效率。Tree Shaking 技术通常用于处理 JavaScript 模块化代码，可以识别模块中未被使用的部分，并将其从最终的打包文件中移除。
Webpack 如何实现 Tree Shaking
Webpack 是一款现代化的前端打包工具，它可以通过一系列的插件和配置来实现 Tree Shaking 技术。
配置 mode
Webpack 4.x 版本及以上的版本，已经默认开启了 Tree Shaking 技术。只需要在 Webpack 配置文件中设置 mode 为 production，即可开启 Tree Shaking 技术。
-- ----------------- -------------- - - ----- ------------- -- ----- ------ --- -
使用 ES6 模块化
ES6 模块化语法可以让 Webpack 更准确地识别模块中未被使用的部分。在使用 ES6 模块化的情况下，Webpack 可以通过静态分析的方式，确定哪些代码被使用，哪些代码没有被使用。
-- ---- ------ ----- - - -- ------ ----- - - -- -- ---- ------ - - - ---- ------ --------------- -- -
在上面的例子中，b.js 中只使用了 a.js 中导出的 a 变量，所以在打包的时候，Webpack 可以将 b.js 中未使用的 b 变量从最终的打包文件中移除。
配置 optimization.minimize
optimization.minimize 是 Webpack 中用于配置代码压缩的选项，它默认为 true，可以通过设置为 false 来关闭代码压缩，从而禁用 Tree Shaking 技术。
-- -----------------
-------------- - -
------------- -
--------- ------
--
-- ----- ------ ---
-配置 optimization.usedExports
optimization.usedExports 可以在 Tree Shaking 技术中进一步提高代码的剔除效率。它可以在代码打包过程中，通过标记哪些导出被使用来识别未使用的部分。
-- -----------------
-------------- - -
------------- -
------------ -----
--
-- ----- ------ ---
-使用 @babel/preset-env
@babel/preset-env 是一个 Babel 插件，它可以将 ES6+ 的代码转换为 ES5 兼容的代码，并支持 Tree Shaking 技术。通过配置 @babel/preset-env 中的 modules 选项为 false，可以让 Babel 不将 ES6 模块化语法转换为 CommonJS 或者 AMD 规范，从而让 Webpack 可以更好地进行 Tree Shaking。
-- --------
-
---------- -
-
--------------------
-
---------- -----
-
-
-
-总结
通过上述配置，我们可以在 Webpack 中实现 Tree Shaking 技术，从而优化代码，提高代码的加载速度和执行效率。在实际的开发过程中，我们应该尽量遵循 ES6 模块化语法，使用 @babel/preset-env 等工具来优化代码，从而让 Tree Shaking 技术发挥更大的作用。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65fbe1dbd10417a22276faf9