在前端开发中，经常会出现需要引入外部CSS文件的情况，而使用@import语句引入外部CSS文件，则会增加多个HTTP请求抬头。为了避免这种情况，我们可以使用npm包rework-import-external来解决这个问题。
rework-import-external
rework-import-external是一个文档对象模型（DOM）重写工具。它可以将CSS规则中的@import语句以及外部链接样式表（例如<link>标签）替换为内联式嵌入。它是一个基于Node.js的自包含模块，因此我们需要在项目中安装它。
安装指令：
npm install rework-import-external --save-dev
使用方法
通过以下代码，我们可以将引用外部CSS文件的<link>标签或@import语句替换为内联嵌入：
-- -------------------- ---- ------- ----- ------ - ------------------ ----- -------------------- - ---------------------------------- ----- --- - - ------- -------------------------------------- ---- - ------ ---- - -- ----- ------------ - ----------- ---------------------------- ------------ --------------------------展开代码
我们首先引入了rework和rework-import-external模块，然后将CSS字符串传入rework()方法，并使用use()方法将importExternalPlugin()函数传入。最后，我们将处理后的CSS字符串输出到控制台。
运行以上代码，将看到以下输出：
body { color: red; }
此时，你已经将外部样式表文件嵌入到了HTML文件中，而不需使用<link>tag或@import语句来引用它们。更好的是，通过这种方式，我们可以减少多个HTTP请求抬头。
参数设置
rework-import-external还提供了一些参数，可以用于针对特定的情况进行定制过滤和处理。
root
设置root选项，可以指定样式中引用外部CSS文件的根目录。例如，如果我们的CSS文件在/static/css目录中，并且要引用位于/static/assets/styles.css中的样式，那么我们应该这样调用该方法：
const processedCss = rework(css) .use(importExternalPlugin({ root: '/static' })) .toString();
filter
设置filter选项，可以过滤哪些外部链接的样式表需要被处理。例如，如果我们只想处理位于example.com域名下的外部样式表，我们可以这样设置：
const processedCss = rework(css) .use(importExternalPlugin({ filter: /^https:\/\/example.com/ })) .toString();
以上代码只会处理example.com域名下的所有外部样式表。
总结
rework-import-external是一个很实用的npm包，用于优化前端性能。我们可以使用它将外部样式表文件嵌入到HTML文件中，从而减少HTTP请求来提高网站性能。在使用它的过程中，我们还可以根据需要进行定制过滤和处理来满足特定的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055f1681e8991b448dcab2
