webpack 优化打包后的体积：使用 Tree Shaking 消除未使用代码-JavaScript中文网-JavaScript教程资源分享门户

随着网页应用程序变得越来越复杂，前端资源的体积也愈发庞大。在这种情况下，优化程序包的大小，以加快页面的加载速度，变得尤为重要。

Webpack 是一个出色的 JavaScript 打包器，它提供了许多功能来优化和压缩最终生成的代码。其中一个重要的优化技术就是 Tree Shaking。本篇文章将介绍什么是 Tree Shaking，如何在 Webpack 中使用它来优化打包后的体积。

什么是 Tree Shaking？

Tree Shaking 是一种优化技术，它可以在打包过程中，消除未使用的代码。这样可以减少程序包的大小，提高应用程序的性能。在静态语言中，这个过程也被称为“死代码消除”。

Tree Shaking 的原理是，通过静态分析代码中的依赖关系，找出那些没有被引用到的模块，然后在最终生成的代码中，剔除这些没有被使用的模块或代码。这样可以防止不必要的代码进入到最终生成的文件中，从而减少文件体积、减轻运行时的开销。

如何在 Webpack 中使用 Tree Shaking？

由于 Tree Shaking 是 Webpack 的内置功能，因此只需要通过简单的配置和一些注意事项，就可以启用它来优化打包后的体积。

1. 配置工程

首先，确保在 package.json 中引入了 Webpack 4 或更高版本。

"devDependencies": {
  "webpack": "^4.0.0"
}

接着，在 Webpack 的配置文件中设置 mode 为 “production”。这将启用 Webpack 的一些内置优化功能。

// webpack.config.js
module.exports = {
  mode: 'production',
  // ...
};

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 模块语法能够被正确地解析。

// .babelrc
{
  "presets": [...],
  "plugins": ["transform-es2015-modules-commonjs"]
}

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 消除未使用的代码。

// index.js
import { sum, times } from './math.js';

console.log(sum(1, 2)); // 3

sum(1, 2); // 未被使用的代码

// math.js
export function sum(a, b) {
  return a + b;
}

export function times(a, b) {
  return a * b;
}

运行 npm run build 命令，生成的打包文件中，已经消除了未使用的 times 变量。

结论

使用 Tree Shaking 可以在打包编译过程中消除未使用的代码，从而最大限度地减少应用程序的体积。在 Webpack 中使用 Tree Shaking 也很容易，只需要按照上述步骤配置工程即可。

当然，Tree Shaking 只是 Webpack 中的一种代码优化技术。如果你想要更深入地了解 Webpack 的优化和高级配置，可以参考 Webpack 官方文档或者相关的教程。

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

webpack 优化打包后的体积：使用 Tree Shaking 消除未使用代码