随着前端开发的发展，项目规模越来越大，代码的复杂度也越来越高。这时候，代码的优化就变得尤为重要。在 webpack 4 中，新增了 splitChunksPlugin 插件，可以帮助我们更好地管理代码，提升应用程序的性能。
什么是 splitChunksPlugin 插件
splitChunksPlugin 是 webpack 4 中新增的一个插件，它可以将公共的代码抽离出来，形成一个独立的代码块。这样就可以减小每个页面需要加载的代码量，提高页面的加载速度。
如何使用 splitChunksPlugin 插件
在 webpack.config.js 中，我们可以通过配置 optimization.splitChunks 对 splitChunksPlugin 插件进行配置。
module.exports = {
// ...
optimization: {
splitChunks: {
chunks: 'all'
}
}
}以上代码表示将所有类型的代码块都进行优化处理，抽离出公共代码。
除此之外，我们还可以配置一些其他的参数，来满足不同的需求。以下是一些常用的配置参数：
- chunks：指定需要进行优化的代码块类型，可以是 all、async 或 initial。
- minSize：指定抽离出来的代码块的最小大小。
- maxSize：指定抽离出来的代码块的最大大小。
- minChunks：指定一个模块被多少个模块依赖时，才会被抽离出来。
- maxAsyncRequests：指定同时加载的最大异步请求数量。
- maxInitialRequests：指定入口文件最大并行请求数量。
- automaticNameDelimiter：指定生成的名称分隔符。
- name：指定生成的代码块名称。
- cacheGroups：指定代码块分组的规则。
示例代码
下面是一个简单的示例代码，来演示 splitChunksPlugin 插件的使用。
-- -------------------- ---- -------
-------------- - -
------ -
---- ---------------
------- -----------------
--
------- -
--------- ------------
----- --------- - -------
--
------------- -
------------ -
------- ------
------------ -
-------- -
----- ----------
------- ----------
---------- -
--
------- -
----- ---------------
----- ---------
------- -----
-
-
-
-
--在以上示例代码中，我们有两个入口文件：app.js 和 vendor.js。其中，vendor.js 包含了一些第三方库的代码，我们希望将它们单独抽离出来，形成一个独立的代码块。同时，我们还希望将一些公共的代码提取出来，形成一个名为 commons 的代码块。
通过以上配置，我们可以将 app.js 和 vendor.js 中的公共代码提取出来，形成一个名为 commons 的代码块，同时将 vendor.js 中的第三方库代码单独抽离出来，形成一个名为 vendor 的代码块。
总结
通过 splitChunksPlugin 插件的使用，我们可以将公共的代码抽离出来，形成一个独立的代码块，从而提升应用程序的性能。在实际开发中，我们可以根据具体的需求，进行不同的配置，来满足不同的优化需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65bded32add4f0e0ff7884c0