在现代 WEB 开发中，性能优化是非常重要的一环，而 Critical CSS 也是其中一个重要的方向。今天，我将向大家介绍一个非常方便易用的 npm 包：critical。
Critical CSS 是什么？
如何在用户获取页面的时候最小化 Web 应用程序需要加载的关键样式，并最大化其他（非关键） CSS 的下载，就是 Critical CSS 的主要目标。
举个例子，如果你有一个页面，其中有一个大图并且这张图片是滚动页面时的底部。如果你的 CSS 是使用这样的方式，比如：
-- -------------------- ---- ------- ------- - ----------------- --- ------- --- --- - ------------ - ----------------- --- ------- --- --- -
当用户在浏览器中浏览网页时，他们将首先加载头文件上的 CSS 。现在，我们知道页面中的最后一张图片是最大的。 所以，用户将等待其他的 CSS 被下载，然后才能使用页面的底部。同样，当用户向下滚动网页时，他们将等待其他 CSS 样式被下载。这将导致速度变慢和性能低。
但是，如果为最后一个页面部分添加关键 CSS 样式，则用户在加载完共享的样式表后就可以滚动到已准备好的页面底部样式，即快速第一次内容呈现时间（First Contentful Paint，FCP）。
-- -------------------- ---- ------- ------- - ----------------- --- ------- --- --- - --------------------- - ----------------- --- ------- --- --- -
critical 是什么
上面的例子说明了 Critical CSS 的重要性，那么 critical 包是用来干什么的呢？其主要功能是抽取 HTML 中需要的关键 CSS代码，打包至一个文件中，加快首次渲染时间，提高性能。
安装
npm i critical
用法
critical 的使用非常简单，很容易理解。让我们通过一个简单的示例来使用它。
-- -------------------- ---- -------
----- -------- - --------------------
-------------------
-- -----
------- -----
----- -----
---- -------------
-- ------
------- -
---- -----------
----------- -----------------
----- -------------
--
-- --
----------- -
-
------- ----
------ ----
--
-
------- ----
------ -----
--
--
-- -----
------- --------------
-- ---
-------- -
---------- ------ ---------- ---------
-------- --------------
--
-- -----
---- -
-
------- -----
--------- ------
-- ---- ------ ----- ------ ------ --
------- --------------
--
--
---------- -- -
---------------------- -------- -------
---让我们大体上了解一下 generate 函数的每个选项：
inline (默认值： false )
当 inline 为 true 时，输出的 Critical CSS 将嵌入页面中，而不是以链接形式加载。默认情况下，这是在HTML的<head></head>部分中完成的。
base
要解析的基本路径。例如，如果你的 HTML 文件位于根目录( / )下，则 base 可以设为 './'，否则你必须使用需要解析的绝对路径。
src
一个页面的路径 (文件名)，例如 './index.html'。如果 inline 属性为 true，则将修改源文件，而不是复制。
target
目标选项。这里我们可以定义三个目标，即 CSS 文件名、HTML 文件名和非关键路径的 CSS 文件名。默认情况下，critical 输出文件会自动放在 /dist 文件夹中。
dimensions
需要生成 CSS 的视口宽度。可以传递多个对象，每个对象都包含 height 和 width 属性。在我们的例子中，我们使用两个维度：高度为 480 和宽度为 320 的移动设备和高度为 900 和宽度为 1200 的桌面。
ignore
一个数组，其中包含要忽略的 CSS 选择器。
extract.selectors
在生成的关键 CSS 中应该出现的 CSS 选择器。可以是任何类型的选择器，包括类、ID 和伪类。
extract.exclude
一个正则表达式的数组，用于排除匹配的选择器。默认情况下，忽略所有 @-规则，包括 @font-face。
css.external
默认为 false，当 external 为 true 时，critical 会从 css 文件中加载外部 CSS 代码，而不是在 HTML 中显式地内嵌 CSS 代码。
css.inline
默认为 false，当 inline 为 true 时，critical 会从 css 文件中加载内嵌的（或不包含链接）和外部 CSS 代码，并将其嵌入到页面中。
css.ignore
省略匹配 globby 路径名检查的 glob 。
Perfect Critical CSS
总结
Critical CSS 可以很好的缩短首次渲染的时间，提高性能。critical 的使用也非常便利，它支持多种属性定制，能够帮助开发者快速地实现 Critical CSS 相关的优化任务。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/63886