Webpack 的 tree shaking 优化技巧介绍

什么是 tree shaking？

Tree shaking 是一个术语，通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块系统中的静态结构特性，例如 import 和 export。

Webpack 如何实现 tree shaking？

Webpack 通过“静态分析”技术，找出源代码中的“死亡代码”，并在打包过程中将其删除，从而实现 tree shaking。

在 Webpack 中，通过以下两个配置来开启 tree shaking：

1. 在 mode 属性中设置为 "production"，这将自动开启 tree shaking。
2. 在 optimization 属性中设置 usedExports 为 true，这将启用代码摇树。

示例代码

// math.js
export function square(x) {
  return x * x;
}

export function cube(x) {
  return x * x * x;
}

// index.js
import { cube } from './math.js';

console.log(cube(3));

假设以上代码是我们的项目文件，我们运行 Webpack 打包后，将会得到以下代码：

// www.javascriptcn.com code example
function r(e) {
  var t = {
    "./math.js": function (e, t) {
      t.r(t), t.d(t, {
        square: function () {
          return n
        }, cube: function () {
          return r
        }
      });
      var n = function (e) {
        return e * e
      }, r = function (e) {
        return e * e * e
      };
    }
  };
  return function (n) {
    if (t[n]) return t[n].exports;
    var r = t[n] = {
      exports: {}
    };
    return e[n](r, r.exports, r), r.exports
  }
}

var e = r(function (e) {
  e("./math.js")
});

console.log(e.cube(3));

我们可以看到，在打包后的代码中，square 函数并没有被打包进来，这就是 tree shaking 的效果。

总结

通过以上的示例代码和介绍，我们可以看到，tree shaking 可以帮助我们去掉无用的代码，从而减少打包后的文件大小，提高页面加载速度。在实际项目中，我们可以通过 Webpack 的配置来开启 tree shaking，从而优化我们的项目。

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