在前端开发中，webpack 已经成为了一个必不可少的工具。而 webpack4 中的 SplitChunksPlugin 插件更是为前端开发者带来了更便捷、高效的代码分离和打包方式。本文将详细介绍 SplitChunksPlugin 的新特性和使用方法，并结合实例代码进行讲解。
SplitChunksPlugin 的作用
在 webpack 中，代码分割是一个非常重要的概念。它可以将代码分割成多个文件，这样可以避免将所有代码打包到一个文件中，导致文件过大，加载速度过慢的问题。而 SplitChunksPlugin 插件就是为了实现这个功能而诞生的。
SplitChunksPlugin 的作用是将公共的模块提取出来，生成一个单独的文件，这样就可以减少代码的重复加载，提高应用程序的性能。
SplitChunksPlugin 的新特性
在 webpack4 中，SplitChunksPlugin 有了很多新的特性，可以更加灵活地控制代码分割和打包。下面我们来一一介绍这些新特性。
chunks
chunks 是一个字符串或者函数，用来指定哪些 chunk 会被优化。默认值为 async，表示只会优化异步加载的 chunk。除此之外，还可以是 all、initial、function 等。
all 表示同时优化同步和异步加载的 chunk；
initial 表示只优化同步加载的 chunk；
function 表示自定义函数，可以根据需要来指定。
minSize
minSize 是用来指定一个 chunk 最小的尺寸，只有当一个 chunk 的大小大于 minSize 时，才会被优化。默认值为 30000。
maxSize
maxSize 是用来指定一个 chunk 最大的尺寸，只有当一个 chunk 的大小小于 maxSize 时，才会被优化。默认值为 0，表示没有最大限制。
minChunks
minChunks 是用来指定一个模块最少被引用的次数，只有当一个模块被引用的次数大于等于 minChunks 时，才会被优化。默认值为 1。
maxAsyncRequests
maxAsyncRequests 是用来指定异步加载的 chunk 的最大数量。默认值为 5。
maxInitialRequests
maxInitialRequests 是用来指定入口文件的最大数量。默认值为 3。
automaticNameDelimiter
automaticNameDelimiter 是用来指定自动生成的文件名之间的分隔符。默认值为 ~。
name
name 是用来指定生成文件的名称。可以是字符串或者函数。如果是字符串，那么就是生成的文件的名称。如果是函数，那么就是根据 chunk 的名称和其他条件生成文件的名称。
SplitChunksPlugin 的使用方法
下面我们来看一下 SplitChunksPlugin 的使用方法。
首先，我们需要安装 webpack 和 SplitChunksPlugin。
npm install webpack webpack-cli --save-dev npm install optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin --save-dev
然后，在 webpack 的配置文件中，我们需要引入 SplitChunksPlugin。
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - -------------------
----- -------------- - -----------------------------------
----- ----------------------- - ----------------------------------------------
-------------- - -
------ -
---- -----------------
------- --------- -------------
--
------- -
--------- ------------------------
----- ----------------------- --------
--
------------- -
---------- -
--- ----------------
------ -----
--------- -----
---------- -----
---
--- ----------------------------
--
------------ -
------- ------
-------- ------
-------- --
---------- --
----------------- --
------------------- --
----------------------- ----
----- -----
------------ -
-------- -
----- -------------------------
--------- ----
--
-------- -
---------- --
--------- ----
------------------- -----
--
--
--
--
--在以上配置中，我们将 app 和 vendor 两个入口文件分别打包成一个文件。其中，vendor 中包含了 react 和 react-dom 两个库，这样可以将这两个库的代码分离出来，提高打包速度。
在 optimization 中，我们配置了 minimizer 来压缩代码，并配置了 splitChunks 来分离代码。其中，我们使用了所有的默认值，只是将 chunks 设置为了 all，这样可以同时分离同步和异步加载的 chunk。
在 cacheGroups 中，我们定义了两个组，vendors 和 default。vendors 表示将所有来自 node_modules 目录下的模块分离成一个文件，而 default 表示将所有不符合 vendors 的模块分离成一个文件。
示例代码
下面我们来看一个简单的示例代码，来演示 SplitChunksPlugin 的使用方法。
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);-- -------------------- ---- -------
-- -----------------
----- ---- - ----------------
----- ------- - -------------------
----- -------------- - -----------------------------------
----- ----------------------- - ----------------------------------------------
-------------- - -
------ -
---- -----------------
------- --------- -------------
--
------- -
--------- ------------------------
----- ----------------------- --------
--
------------- -
---------- -
--- ----------------
------ -----
--------- -----
---------- -----
---
--- ----------------------------
--
------------ -
------- ------
-------- ------
-------- --
---------- --
----------------- --
------------------- --
----------------------- ----
----- -----
------------ -
-------- -
----- -------------------------
--------- ----
--
-------- -
---------- --
--------- ----
------------------- -----
--
--
--
--
--在以上代码中，我们将 app 和 vendor 两个入口文件打包成一个文件。其中，vendor 中包含了 react 和 react-dom 两个库，这样可以将这两个库的代码分离出来，提高打包速度。
总结
SplitChunksPlugin 是 webpack4 中的一个非常重要的插件，可以帮助我们将代码分割成多个文件，提高应用程序的性能。本文详细介绍了 SplitChunksPlugin 的新特性和使用方法，并结合实例代码进行了讲解。希望本文对大家学习和使用 webpack4 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65e6eeca1886fbafa4207351