在现代前端开发中，代码优化是非常重要的一部分。其中，Tree Shaking 技术是一个非常有效的优化方式之一。本文将介绍如何使用 Webpack4 中的 Tree Shaking 技术来优化前端代码。
什么是 Tree Shaking
Tree Shaking 是一种通过静态分析代码的方式，去除未使用的代码的技术。它的原理是通过分析模块之间的依赖关系，找出哪些代码没有被使用到，然后将这些代码从最终的打包文件中去除掉。
Tree Shaking 技术最早是在 Rollup 中被引入的，但是在 Webpack4 中也已经支持了。使用 Tree Shaking 技术可以有效减少打包后的文件大小，提高网页的加载速度。
如何使用 Webpack4 中的 Tree Shaking
在 Webpack4 中，使用 Tree Shaking 技术非常简单。只需要在配置文件中开启 optimization.usedExports 和 optimization.sideEffects 两个选项即可。
// webpack.config.js
module.exports = {
// ...其他配置
optimization: {
usedExports: true,
sideEffects: true,
},
};其中，optimization.usedExports 选项用于告诉 Webpack 哪些导出的模块被使用了，哪些没有被使用。而 optimization.sideEffects 选项则用于告诉 Webpack 哪些模块是有副作用的，即不应该被去除。
需要注意的是，optimization.usedExports 选项只能处理 ES6 模块语法，对于 CommonJS 或者 AMD 等其他模块语法则无法进行 Tree Shaking。
示例代码
下面是一个简单的示例代码，用于演示如何使用 Webpack4 中的 Tree Shaking 技术。
-- -------------------- ---- ------- -- ------------ ------ - --- - ---- ------------ ------------------ ---- -- ----------- ------ -------- ------ -- - ------ - - -- - ------ -------- ------ -- - ------ - - -- -
上面的代码中，math.js 中有两个函数 add 和 sub，但是在 index.js 中只使用了 add 函数。我们可以通过 Tree Shaking 技术将没有使用到的 sub 函数从最终的打包文件中去除掉。
在 webpack.config.js 中，添加如下配置：
-- -------------------- ---- -------
-- -----------------
-------------- - -
----- -------------
------ -----------------
------- -
--------- ------------
--
------------- -
------------ -----
------------ -----
--
--然后使用 Webpack 进行打包，可以看到最终生成的 bundle.js 文件中，只包含了使用到的 add 函数，而没有包含未使用到的 sub 函数。
总结
使用 Tree Shaking 技术可以有效减少打包后的文件大小，提高网页的加载速度。在 Webpack4 中，开启 Tree Shaking 技术非常简单，只需要在配置文件中开启 optimization.usedExports 和 optimization.sideEffects 两个选项即可。但是需要注意的是，optimization.usedExports 选项只能处理 ES6 模块语法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/658057d4d2f5e1655db88ea8