Webpack 是一个强大的模块打包工具，但是在项目变得越来越复杂时，Webpack 的打包时间会变得非常慢。这会影响到开发者的开发效率以及整个项目的交付效率。因此，Webpack 提供了多种打包优化方案，其中之一是使用 SplitChunksPlugin。
SplitChunksPlugin 可以将 node_modules 目录下的第三方库和公共代码提取出来，形成一个单独的文件，从而加快打包速度并减小输出文件的大小。本文将详细介绍如何使用 SplitChunksPlugin 进行打包优化，并提供示例代码。
如何使用 SplitChunksPlugin？
- 安装 webpack 和 webpack-cli
首先需要安装 webpack 和 webpack-cli，可以使用以下命令进行安装：
npm install webpack webpack-cli --save-dev
- 创建 webpack 配置文件
在项目根目录下创建 webpack.config.js 文件，配置 webpack 相关设置。
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- -------
-
-- 配置 SplitChunksPlugin
修改 webpack 配置文件，在 optimization 属性下面添加 splitChunks 属性配置 SplitChunksPlugin。
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- -------
--
------------- -
------------ -
------- ------
----- ---------
-
-
-- 引入 SplitChunksPlugin
在 webpack 配置文件顶部引入 SplitChunksPlugin。
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - --------------------------------------------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- -------
--
------------- -
------------ -
------- ------
----- ---------
-
--
-------- -
--- -------------------
-
-- 运行 webpack 打包命令
运行以下命令进行打包：
npx webpack
SplitChunksPlugin 参数解析
SplitChunksPlugin 提供了多个参数，其中比较重要的是 chunks 和 name。
chunks 参数用来确定哪些块需要被分离出去。它有以下选项：
initial只适用于入口 chunk。async只适用于异步 chunk。all包括所有类型的 chunk。
name 参数用来指定提取出来的文件名。
示例代码
下面是一个示例代码，演示如何使用 SplitChunksPlugin 进行打包优化。
index.html
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- -------------- ------------ ------- ------ ------- -------------------------- ------- ------------------------- ------- -------
index.js
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---- ---------
-------------------------------------------------------
-------------- -- -
------------------------------------ -----------
--
------------ -- -
---------------------
---webpack.config.js
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - --------------------------------------------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- -------
--
------------- -
------------ -
------- ------
----- ---------
-
--
-------- -
--- -------------------
-
-以上代码将 axios 和 lodash 从入口文件中提取出来，形成一个名为 vendors 的独立文件。
总结
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65c1bedbadd4f0e0ffbbfcfe