在 Web 开发中，CSS 文件是必不可少的一部分。当项目变得越来越大时，CSS 文件也随着变得越来越庞大，这就会对网站性能产生负面影响，因为浏览器必须下载整个 CSS 文件才能呈现网页。为了避免这种情况，我们可以使用一个叫做 broccoli-csssplit 的 npm 包，将 CSS 文件拆分成多个文件，以减少文件大小和提高网站性能。
安装 broccoli-csssplit
在使用 broccoli-csssplit 之前，需要先安装 Node.js 和 npm。如果已经安装了 Node.js 和 npm，可以直接使用以下命令安装 broccoli-csssplit：
npm install --save-dev broccoli-csssplit
使用 broccoli-csssplit
- 创建一个
Brocfile.js文件，并且定义一个变量用于输入 CSS 文件的路径：
var css = 'app/styles/styles.css';
- 加载
broccoli-csssplit来拆分 CSS 文件：
var csssplit = require('broccoli-csssplit');- 现在我们可以使用
csssplit函数将css变量传递给它：
var outputCSS = csssplit(css, {
outputDir: 'css',
maxSelectors: 4000,
map: true
});outputCSS 将是一个包含拆分后 CSS 文件的目录。
outputDir 参数指定了拆分后的 CSS 文件应该输出到的目录。在上述示例中，它是 css 目录。
maxSelectors 参数指定了每个拆分后的 CSS 文件所容纳的选择器数量。在上述示例中，它是 4000。
map 参数指定是否生成 Source Map 文件。在上述示例中，它为 true。
- 最后，将
outputCSS加载到一个静态服务器中：
module.exports = outputCSS;
现在，当你运行 broccoli serve 命令时，所拆分的 CSS 文件将自动在目录 css 中生成。你也可以使用 broccoli build 命令来将它们编译到 dist 目录中。
示例代码
以下是完整的 Brocfile.js 文件，包含了如何使用 broccoli-csssplit 将样式表拆分成多个文件的示例代码：
-- -------------------- ---- ------- --- --- - ------------------------ --- -------- - ----------------------------- --- --------- - ------------- - ---------- ------ ------------- ----- ---- ---- --- -------------- - ----------
以上代码将 styles.css 文件拆分成了多个文件，每个文件最多包含 4000 个选择器，并生成了一个 Source Map 文件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c8bccdc64669dde52e8