在现代的 Web 应用程序中，性能变得越来越重要。其中一个极其重要的方面是页面加载速度。为了让我们的网站更快，我们可以使用一些技术来减少首次加载时间，其中之一就是使用关键 CSS（Critical CSS）。
什么是关键 CSS？
关键 CSS 是指与首屏呈现相关的样式。通常情况下，这涉及到视口内的元素以及与此相关的样式规则。通过使用关键 CSS，我们可以快速呈现出页面的主要内容，而无需等待所有样式表和脚本的加载完成。
什么是 inline-critical-css？
inline-critical-css 是一个 NPM 包，它可以自动提取关键 CSS 并将其嵌入 HTML 文件中，以便更快地呈现页面。它使用 Puppeteer 来生成渲染页面并确定哪些样式是关键的，并将其嵌入HTML文件中。
如何使用 inline-critical-css？
使用 inline-critical-css 只需要几个简单步骤：
步骤1：安装 inline-critical-css
npm install inline-critical-css --save-dev
步骤2：编写脚本
编写一个脚本来使用 inline-critical-css。这个脚本应该根据您的需求进行调整，但基本上是这样的：
-- -------------------- ---- ------- ----- -------------- - ------------------------------- ----- -- - -------------- ------ -- -- - ----- ---- - ------------------------------------- --------- ----- --- - ------------------------------------- --------- ----- ------ - ----- -------------------- ----- --------------------------------------- -------- -----
步骤3：运行脚本
运行步骤2中编写的脚本。这将提取关键 CSS 并将其嵌入到您选择的 HTML 文件中。
示例代码
下面是一个简单的示例，演示如何使用 inline-critical-css。在这个示例中，我们有一个 index.html 文件和一个 styles.css 文件。我们将使用 inline-critical-css 将关键 CSS 嵌入到 index.html 文件中。
index.html
-- -------------------- ---- -------
--------- -----
------
------
--------- ---------------
----- ---------------- ------------------
-------
------
--------
----------- -- -- -------------
------- -- --- ----- --------------
---------
------
---------
----------- ------
------- -- --- ----- ------------
----------
---------
----------- ------
------- -- --- ------ ------------
----------
-------
-------
-------styles.css
-- -------------------- ---- ------- ------ - ----------------- ----- ------ ----- -------- ----- - -- - ---------- ----- -------------- ------- - - - ---------- ------- -------------- ----- - ------- - -------- ----- ------- --- ----- ----- -------------- ----- -
inline-critical-css.js
-- -------------------- ---- ------- ----- -------------- - ------------------------------- ----- -- - -------------- ------ -- -- - ----- ---- - ----------------------------- --------- ----- --- - ----------------------------- --------- ----- ------ - ----- -------------------- ----- ------------------------------- -------- -----
在运行这个脚本之后，会生成一个名为 output.html 的文件。这个文件与 index.html 文件相同，但是已经将关键 CSS 嵌入到了文档头部。这对于首次加载时间非常有帮
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/48374