npm 包 purge-from-html 使用教程

阅读时长 5 分钟读完

前言

在开发 Web 应用程序时,我们通常使用样式框架(CSS Framework)来加速开发。然而,这些框架并不一定满足我们的所有需求,可能会导致需要定制化样式。在我们的样式表中,可能会有一些未使用的 CSS 代码,这些代码会占用很多空间,导致页面加载时间变长,甚至会影响到性能。因此,我们需要一种工具来帮助我们清除未使用的 CSS 代码。

在这篇文章中,我们将介绍一个 NPM 包——purge-from-htmlpurge-from-html 可以根据 HTML 文件和 CSS 文件清除未使用的 CSS 代码,以此实现最小化样式表。

环境准备

  • Node.js:我们需要安装 Node.js。
  • NPM:在 Node.js 安装后,NPM 已随之安装。

安装 purge-from-html

在继续之前,请确保您已创建好一个新的项目目录。您可以通过以下命令安装 purge-from-html

这将在您的项目中安装该包并将其添加到您的 package.json 文件中。

使用 purge-from-html

我们将使用例子中的 index.html 文件和 style.css 文件。在 index.html 文件中,您需要确保所有 CSS 文件都被正确链接到。在这个例子中,我们将将样式文件链接到 HTML 头部:

-- -------------------- ---- -------
--------- -----
------
------
  ----- ---------------- ---------------- ----------------
-------
------
  ---------- -----------
-------
-------

在当前项目文件夹下,创建一个新文件名为 purge.js,并将以下代码添加到 purge.js 文件:

-- -------------------- ---- -------
----- ----- - ---------------------------

-------
  -------- ---------------
  ---- --------------
  ------- ------------------
---------- -- -
  ------------------- -------
--
------------ -- -
  -------------------
---

现在打开终端,并导航到项目的根目录。运行以下命令:

运行成功后,您可以在 build/style.css 文件中找到已被最小化的 CSS 代码。

配置参数

下面是使用 purge() 方法时的可用配置参数:

  • content:(类型:Array)包含 HTML 文件的数组。
  • css:(类型:Array)包含 CSS 文件的数组。
  • output:(类型:String)输出文件的路径。
  • defaultExtractor:(类型:Function)提取类名的默认方法,您也可以自定义提取器
  • extractors:(类型:Object)自定义提取器

自定义提取器

purge-from-html 提供了一个默认的提取器,但您可能需要自己定义一个提取器以匹配自己的项目。例如,如果您使用了 Angular,则您需要自定义提取器来提取 Angular 组件中的类名。

以下是如何自定义提取器的示例:

-- -------------------- ---- -------
----- ----- - ---------------------------
----- ------------ - -----------------------------------------------
----- --------- - --------- -- -
  ----- ------------------------- - ----------------------------------------- ----
  ------ ----------------------------------------
--

-------
  -------- ---------------
  ---- --------------
  ------- ------------------
  ----------- -
    ----- -
      ----------
      ----------- -------- -------
    --
  --
---------- -- -
  ------------------- -------
--
------------ -- -
  -------------------
---

结论

使用 purge-from-html 轻松最小化您的样式表,以加快应用程序的加载速度。这个 NPM 包结合 HTML 文件和 CSS 文件使得您可以快速识别未使用的 CSS 代码,并从样式表中删除它们。最重要的是,它可以帮助您节省网络带宽并提高应用程序的性能。

参考链接

  1. purge-from-html Github 仓库
  2. purgecss 文档
  3. 用 Purgecss 减少 CSS 文件的大小
  4. 如何使用 Webpack 和 Purgecss 轻松优化你的 CSS

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60055e8381e8991b448dbdf7

纠错
反馈