介绍
在项目开发中，我们经常会遇到 CSS 文件过大的问题，这不仅会影响页面加载速度，也会浪费用户的流量。为了解决这个问题，我们可以使用 css-split-webpack-plugin 这个 npm 包来把大的 CSS 文件拆分成小的文件，从而加快页面加载速度，提高用户体验。
安装
在使用 css-split-webpack-plugin 之前，需要先安装 webpack，如果你还没有安装，可以使用以下命令来安装：
npm install webpack --save-dev
之后，我们就可以安装 css-split-webpack-plugin 了：
npm install css-split-webpack-plugin --save-dev
配置
在 webpack 配置文件中，我们需要引入 css-split-webpack-plugin，并在 plugins 中添加配置：
-- -------------------- ---- -------
----- --------------------- - --------------------------------------------
-------------- - -
-- --- ----
-------- -
--- -----------------------
----- -----
--------- ----------------------
--------- -----
-------- ----
--
-
-- --- ----
--在这个配置中，我们使用了 size、filename、preserve 和 imports 四个参数：
size: 拆分的文件大小，默认为 20000 字节（20KB）。filename: 拆分后的文件名格式，默认为[name]-[part].[ext]，其中[name]为文件名，[part]为拆分后的部分编号，[ext]为文件扩展名。preserve: 拆分后的文件是否保留@import。imports: 拆分后的文件是否自动引入其他文件中的样式，比如在 a.css 中引入了 b.css，拆分后的样式文件中是否自动引入 b.css。
示例
为了演示 css-split-webpack-plugin 的使用，我们可以创建一个简单的示例项目。首先，在命令行中运行以下命令，创建一个新的 npm 项目：
npm init -y
然后，安装 webpack 和 css-split-webpack-plugin：
npm install webpack css-split-webpack-plugin --save-dev
接着，在项目根目录下创建一个 src 目录，然后在该目录下创建两个 CSS 文件，分别为 a.css 和 b.css，内容如下：
-- -------------------- ---- ------- -- ----- -- ---- - ----------------- ---- - ------- -------- -- ----- -- ---- - ------ ------ -
接下来，我们需要创建 webpack 配置文件，可以在项目根目录下创建一个 webpack.config.js 文件，然后在该文件中添加以下配置：
-- -------------------- ---- -------
----- ---- - ----------------
----- --------------------- - --------------------------------------------
-------------- - -
------ --------------
------- -
----- ----------------------- --------
--------- -----------
--
----- --------------
------- -
------ -
-
----- ----------
---- ---------------- -------------
-
-
--
-------- -
--- -----------------------
----- -----
--------- ----------------------
--------- -----
-------- ----
--
-
--在这个配置中，我们定义了入口文件为 a.css，输出文件为 bundle.js。在 module.rules 中，我们指定了 CSS 文件的加载方式，使用了 style-loader 和 css-loader。在 plugins 中，我们添加了 CssSplitWebpackPlugin 这个插件，设置了相关的参数。
最后，在命令行中运行以下命令，编译项目：
npx webpack
编译完成后，在 dist 目录下会生成多个 CSS 文件，分别为 a-0.css、a-1.css、b-0.css 和 b-1.css，其中 a-0.css 和 a-1.css 是拆分后的 a.css 文件，b-0.css 和 b-1.css 是拆分后的 b.css 文件。
最后，我们可以在 HTML 文件中使用拆分后的 CSS 文件，示例代码如下：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- --------------- --
-------------------
----- ---------------- ------------------- --
----- ---------------- ----------------------- --
-------
------
--------- -----------
-------
-------在这个示例中，我们引入了拆分后的 a.css 文件，使用了 a-0.css 和 a-1.css 两个文件来加载 CSS。
总结
使用 css-split-webpack-plugin 可以很方便地把大的 CSS 文件拆分成小的文件，从而提高页面加载速度和用户体验。在配置时，我们需要设置合适的拆分大小和文件名格式，如果需要保留 @import 和自动引入其他文件中的样式，也需要设置相应的参数。在实际使用中，我们可以根据项目的实际情况来确定合适的拆分大小和文件名格式，以便更好地提升页面性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66418