在前端开发中，webpack 是一个非常流行的工具，它可以将多个 JavaScript 文件打包成一个文件，以减少浏览器的请求次数。然而，在实际的开发中，我们通常会遇到各种各样的问题，比如打包后的文件过大、加载速度过慢等。在这种情况下，我们就需要使用 webpack 的 SplitChunksPlugin 插件来优化前端性能。
SplitChunksPlugin 简介
SplitChunksPlugin 是 webpack 内置的一个插件，它可以将公共的代码拆分成一个独立的文件，以便于缓存和复用。它可以帮助我们减少打包后的文件大小，提高页面的加载速度。
如何配置 SplitChunksPlugin
我们可以通过在 webpack 配置文件中添加以下代码来启用 SplitChunksPlugin 插件：
module.exports = {
// ...
optimization: {
splitChunks: {
chunks: 'all',
},
},
};在这个配置中，我们将 chunks 属性设置为 all，这表示我们将分离所有模块的公共代码。如果你只想分离某些特定的模块，可以将其设置为 initial 或 async。
SplitChunksPlugin 的优化效果
为了更好的了解 SplitChunksPlugin 的优化效果，我们可以通过以下示例代码来进行测试：
-- -------------------- ---- ------- ------ - ---- --------- ------ ------ ---- --------- ------ - --- - ---- ---------- ----- --- - -- -- - ------------------- -- ----- --- - -- -- - ------------------- -- ----------------------- -- -- -- --- ---- ------------------------------------------- ------------------ -- -- ---- ------ ------
在这个示例中，我们导入了 lodash 和 moment 这两个库，以及一个自定义的工具函数 sum，然后调用了它们。我们通过在 webpack 的配置文件中启用 SplitChunksPlugin 插件，打包生成的文件如下：
-- -------------------- ---- -------
-- ----------
-------------------- - ------------------- -- -------------- -- - -------- --- -- -- -
--------- - -----
--- ----- -- ---- ----- -- ------
-- --------------------
-------------------- - ------------------- -- -------------------------------- -- -------- --- -- -- -
---- --------
------- --------- - -------- --- -
------ - - -
-
-- -------- --- -- -- -
---- --------
------- ----- - -------- -- -
--- ---- - - ----------------- - - --- --------- - - -- - - -- ---- ---- - -------------
------ ------------------ --- -- -
------ - - -
--- --
-
-----
-- -------
-------------------- - ------------------- -- ------------------- -
-- -------- --- -- -- -
----- ----- ----
--
-- -------- --- -- -- -
---- --------
------- ------ ------ --------- -- -
------ -
---- ------ ---------- --------- -- -
------ -
----
--- - - -----
-------- --- -
--- ---- - - ----------------- - - --- --------- - - -- - - -- ---- ---- - -------------
------ ------------------ --- -- -
------ - - -
--- --
-
-------- --- -
------ -------------
-
--
-- -------- --- -- -- -
---- --------
--- - - ----- - - -----
--------------------------- -- -- -- --- ---- -----------------------------------------------
--
-- -------- --- -- -- -
---- --------
----- ----
--
-- -------- --- -- -- -
---- --------
------------------
--
-- -------- --- -- -- -
---- --------
------------------
-
-- ---- -- ------通过对比这两个文件，我们可以看到，由于我们使用了 SplitChunksPlugin 插件，打包后的文件中：lodash.js 和 moment.js 被拆分成了一个单独的文件，这意味着如果我们在多个页面中使用这两个包，浏览器只需要下载一次即可。
而打包后的 main.js 文件与原始文件相比，只有 17.0 KB 左右，这减少了一部分的请求时间。
结论
SplitChunksPlugin 插件可以帮助我们更好的优化前端性能，通过将公共的代码拆分为一个单独的文件，减少了浏览器的请求次数，加快了页面的加载速度。在实际的开发中，我们可以根据具体的需求，通过修改 SplitChunksPlugin 的配置，进一步优化我们的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/673434c30bc820c58247549b