简介
随着前端技术的不断发展，大家对于页面性能的要求越来越高，而在前端开发中引入第三方库则是常事。但是随之带来的问题便是包含许多未使用的 css 文件，会导致页面的加载速度变慢，增加网络请求的时间。而 purge-fa 这个 npm 包就可以帮我们解决这个问题，它可以去除未使用的 font-awesome 的 css 样式，提高页面的性能和加载速度。
安装
执行以下命令进行安装：
npm install purge-fa --save-dev
使用
在命令行中运行以下命令进行使用：
purge-fa --input input.css --output output.css
其中，input.css 是需要去除未使用 font-awesome 样式的 css 文件，output.css 是输出的新的 css 文件，即已经删除了未使用 font-awesome 样式的 css 代码后的文件。
示例
下面为大家提供一个使用 purge-fa 的例子：
我们先新建一个 test.html 文件，内容如下：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ------------------- ----- ---------------- ------------------------ ----- ---------------- ---------------- ------- ------ ---- --------- --------------- ---- ------------------- ------- -------
其中，我们引入了 font-awesome.css 以及 test.css 两个 css 文件。
font-awesome.css 文件内容如下：
-- -------------------- ---- ------- -- ---- ------- ----- -- ---------- - --------------------- - ------------ -- -- ------- - ----------------------------- ------ --- --- ---- ---- --- -------- -- --- - -------- ------------- ----- ------ ------ ------ ------ ------------ ---------- -------- --------------- ----- ----------------------- ------------ ------------------------ ---------- - --------------- - -------- -------- -
test.css 文件内容如下：
.test {
color: red;
}我们可以看到，在 test.html 中，我们只使用了一个 fa fa-home 的 class，而 test.css 文件则没有被使用。此时，我们可以使用 purge-fa 进行优化。
首先，我们需要将 font-awesome.css 和 test.css 两个文件进行合并，执行以下命令：
cat font-awesome.css test.css > input.css
然后，在命令行中执行以下命令：
purge-fa --input input.css --output output.css
此时，我们便得到了一个新的文件 output.css，内容如下：
-- -------------------- ---- ------- -- ---- ------- ----- -- ---------- - --------------------- - ------------ -- -- ------- - ----------------------------- ------ --- --- ---- ---- --- -------- -- --- - -------- ------------- ----- ------ ------ ------ ------ ------------ ---------- -------- --------------- ----- ----------------------- ------------ ------------------------ ---------- - --------------- - -------- -------- -
我们可以看到，已经将未使用的 test.css 部分删除了。
最后，我们只需要将 output.css 文件引入到 test.html 文件中即可，如下所示：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ------------------- ----- ---------------- ------------------ ------- ------ ---- --------- --------------- ---- ------------------- ------- -------
我们可以看到，在这个例子中，我们成功地删除了未使用的 css 代码，提高了性能和加载速度。
结语
本文介绍了如何使用 purge-fa 动态地去除未使用的 font-awesome 样式，以提高页面性能和加载速度。相信大家通过本文的介绍，可以学习并掌握相关知识，并在实际开发中进行应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600568cf81e8991b448e48d9