在网站优化中，一个常见的任务就是将页面渲染速度尽可能地优化，而其中关键渲染路径更是一个需要优化的重要点。为了最小化首屏渲染时间，Critical CSS 技术被提出。这种技术可以让关键 CSS 在首次渲染中优先加载，以提高首次渲染性能。gulp-css-critical 是 Node.js 中一个用于提取关键 CSS 的 npm 包，本文将对其使用方法进行详细介绍。
安装
在使用 gulp-css-critical 之前，您需要先安装 Node.js 这个环境。如果您还没有安装，请访问 Node.js 官网 进行安装。
接着使用 npm 命令进行安装即可:
npm install gulp-css-critical --save-dev
使用方法
gulp-css-critical 设计得非常简单，它基于gulp的任务自动化构建工具，并且可以配合多种代码预处理器（如：Sass，Less等）使用。
首先，您需要在主项目中创建一个名为 gulpfile.js 的文件，在文件中引入所需的依赖库:
const gulp = require('gulp');
const cssCritical = require('gulp-css-critical');然后，您可以开始使用 gulp-css-critical 这个插件。下面是一个示例的 gulpfile.js 文件，它演示了怎样把主样式 style.css 文件转换成内联样式表，顺便过滤出来需要内联的 CSS：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------- - -----------------------------
----- ----- - ------------------------
------------------------- -------- -- -
----- ------------- - -----------------
----- -------------------- - -
--------------------
-------------------- -- ------- ---------
--
----- -------------- - -----------------------
-------------------
---- ---------------------
------- --------------
----
----- -------- - ------------------------------
--------------------------------
----- ---------- - --------------------- ------------------------
----------------------------
------ --------------------- --------- ------------
---可以看到，这个任务首先从 HTML 文件 src/index.html 中提取出页面上需要用到的关键 CSS，忽略了所有生成字体的 CSS 类。并且通过 pipe() 方法可以将提取出来的内联样式表和其他非 CSS 元素一起按照相对路径写入到 "/static/" 路径下面。
最后的输出结果是，生成一个名为 index.html 的 HTML 文件，并附有相关的内联样式表，以及其它所需的静态文件。如下：
-- -------------------- ---- -------
------
-------------
------
-------
-- -- --- ---- ---- --
--------
----- - --- -------------- ----
-------
-------总结
在这篇文章中，我们学习了如何使用 npm 包 gulp-css-critical 提取出一个页面中的关键 CSS 并内联在 HTML 文档的头部，通过这样的优化可以最小化首次渲染时间，提高网站的性能表现。本篇文章的示例代码在 https://github.com/ 中，欢迎克隆并自己尝试使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005692781e8991b448e4b64