Webpack 如何使用 Tree Shaking 消除无用代码？-JavaScript中文网-JavaScript教程资源分享门户

作为前端工程师，我们经常需要将多个 JavaScript 文件打包成一个文件，以提高页面加载速度。其中，Webpack 是目前最流行的打包工具之一。不过，随着项目越来越庞大，代码也越来越复杂，这样的打包方式就会导致打包出的文件庞大，加载时间长，同时还会导致无用代码的出现。这时，就需要使用 Tree Shaking 机制来消除这些无用代码，提高应用性能。

Tree Shaking 是什么？

Tree Shaking 是指将 JavaScript 中未使用的代码从最终打包的文件中消除的过程，从而减少打包后的文件大小，提高应用的性能。其实现背后的原理是，Webpack 在打包时会对代码进行静态分析，先找出所有的模块及其依赖项，再通过分析模块内的代码，确定哪些代码未被使用，从而将其从打包文件中删除。

如何使用 Tree Shaking？

Webapck 提供了一种自动消除未用到的代码的方式 —— 使用 ES6 的 import 和 export 语句。只要我们按照正确的方式编写代码，Webpack 就可以自动地进行 Tree Shaking。

// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

// main.js
import { add } from './math.js';
console.log(add(1, 2));

在上述代码中，只有 add 函数被引用，subtract 函数未被引用。因此，Tree Shaking 就可以将 subtract 函数从打包生成的代码中删除。

//打包生成的代码
function add(a, b) {
  return a + b;
}
console.log(add(1, 2));

需要注意的是，为了让 Tree Shaking 正常工作，我们需要满足一些条件：

使用 ES6 的 import 和 export 语句
代码必须是静态的，不能存在动态导入
不能使用 eval() 编译 JavaScript 代码，因为它打破了静态编译的条件

使用 Tree Shaking 的注意事项

由于 Tree Shaking 是依赖 ES6 的 import 和 export 语句的，因此，若代码中存在 CommonJS 或 AMD 模块，Webpack 就无法进行 Tree Shaking，这时就需要使用额外的插件将其转换成 ES6 模块。

此外，我们还需要开启 Webpack 的压缩功能，这样才能真正地将未被使用的代码从最终打包的文件中删除。我们可以通过设置 mode 属性的值为 production 来开启压缩功能，如下所示：

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

总结

Tree Shaking 是通过静态分析代码来消除未使用的模块和依赖到的函数的。在正确的使用方式的指导下，可以轻松地减少打包文件大小，提高应用的性能。同时还需要注意开启 Webpack 的压缩功能和将非 ES6 模块转换成 ES6 模块的问题。希望本篇文章可以帮助大家更好地使用 Tree Shaking 提升应用性能。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64671d57968c7c53b0783f00