webpack 配置 SplitChunksPlugin 优化前端性能

在前端开发中，webpack 是一个非常流行的工具，它可以将多个 JavaScript 文件打包成一个文件，以减少浏览器的请求次数。然而，在实际的开发中，我们通常会遇到各种各样的问题，比如打包后的文件过大、加载速度过慢等。在这种情况下，我们就需要使用 webpack 的 SplitChunksPlugin 插件来优化前端性能。

SplitChunksPlugin 简介

SplitChunksPlugin 是 webpack 内置的一个插件，它可以将公共的代码拆分成一个独立的文件，以便于缓存和复用。它可以帮助我们减少打包后的文件大小，提高页面的加载速度。

如何配置 SplitChunksPlugin

我们可以通过在 webpack 配置文件中添加以下代码来启用 SplitChunksPlugin 插件：

module.exports = {
  // ...
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
};

在这个配置中，我们将 chunks 属性设置为 all，这表示我们将分离所有模块的公共代码。如果你只想分离某些特定的模块，可以将其设置为 initial 或 async。

SplitChunksPlugin 的优化效果

为了更好的了解 SplitChunksPlugin 的优化效果，我们可以通过以下示例代码来进行测试：

// javascriptcn.com code example
import _ from 'lodash';
import moment from 'moment';
import { sum } from './utils';

const foo = () => {
  console.log('foo');
};

const bar = () => {
  console.log('bar');
};

console.log(_.chunk([1, 2, 3, 4, 5], 2));
console.log(moment().format('YYYY-MM-DD'));
console.log(sum(1, 2, 3, 4));
foo();
bar();

在这个示例中，我们导入了 lodash 和 moment 这两个库，以及一个自定义的工具函数 sum，然后调用了它们。我们通过在 webpack 的配置文件中启用 SplitChunksPlugin 插件，打包生成的文件如下：

// javascriptcn.com code example
// runtime.js
(window.webpackJsonp = window.webpackJsonp || []).push([[0], [, , function (e, t, n) {
  e.exports = n(10)
}], [[11, 1, 2]], [[11, 1, 2]]]);
// chunkvendors~main.js
(window.webpackJsonp = window.webpackJsonp || []).push([["chunkvendors~main"], [, function (e, t, n) {
  "use strict";
  n.r(t), t.default = function (e) {
    return e + 1
  }
}, function (e, t, n) {
  "use strict";
  n.r(t), t.sum = function () {
    for (var e = arguments.length, t = new Array(e), n = 0; n < e; n++) t[n] = arguments[n];
    return t.reduce((function (e, t) {
      return e + t
    }), 0)
  }
}]]);

// main.js
(window.webpackJsonp = window.webpackJsonp || []).push([["main"], {
  0: function (e, t, n) {
    n(1), n(2), n(3)
  },
  1: function (e, t, n) {
    "use strict";
    n.r(t), n.d(t, "sum", (function () {
      return u
    })), n.d(t, "default", (function () {
      return f
    }));
    var r = n(0);

    function u() {
      for (var e = arguments.length, t = new Array(e), n = 0; n < e; n++) t[n] = arguments[n];
      return t.reduce((function (e, t) {
        return e + t
      }), 0)
    }

    function f() {
      return Object(r.a)()
    }
  },
  2: function (e, t, n) {
    "use strict";
    var r = n(4), u = n(5);
    console.log(Object(r.a)([1, 2, 3, 4, 5], 2)), console.log(Object(u.a)().format("YYYY-MM-DD"))
  },
  3: function (e, t, n) {
    "use strict";
    n(6), n(7)
  },
  6: function (e, t, n) {
    "use strict";
    console.log("foo")
  },
  7: function (e, t, n) {
    "use strict";
    console.log("bar")
  }
}, [[0, 1, 2]]]);

通过对比这两个文件，我们可以看到，由于我们使用了 SplitChunksPlugin 插件，打包后的文件中：lodash.js 和 moment.js 被拆分成了一个单独的文件，这意味着如果我们在多个页面中使用这两个包，浏览器只需要下载一次即可。

而打包后的 main.js 文件与原始文件相比，只有 17.0 KB 左右，这减少了一部分的请求时间。

结论

SplitChunksPlugin 插件可以帮助我们更好的优化前端性能，通过将公共的代码拆分为一个单独的文件，减少了浏览器的请求次数，加快了页面的加载速度。在实际的开发中，我们可以根据具体的需求，通过修改 SplitChunksPlugin 的配置，进一步优化我们的代码。

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