在前端开发中，我们经常需要开发或优化网站的性能，尤其是针对网站的加载速度进行优化。这个时候，我们会发现网站中一些静态资源的加载速度特别慢，需要进行特殊的优化。这时，就需要用到一个工具——critical。
本文将详细地介绍 critical 的使用，包括安装、配置以及命令的使用等。同时，我们还将提供一些示例代码，以方便读者更好地理解和掌握 critical 的使用方法。
安装 critical-cli
为了使用 critical，我们需要先在本地环境中安装 critical-cli。安装可以使用 npm 来进行，在命令行终端中输入以下命令即可：
--- ------- ------------ --
配置 critical-cli
安装成功后，我们需要对 critical-cli 进行一些配置。这些配置将在使用 critical-cli 的时候被调用，以满足不同的需求。
在配置之前，我们需要了解 critical-cli 的默认配置，以更好地理解和掌握如何进行自定义配置。下面是 critical-cli 默认配置的一些参数：
-
----- --------------
---- -----
------- -----
------- ------
------- -----
------ -----
------- ----
-------- --
-------- ------
---------- ----------- - ------------
------- ---
---- ---
------ ------
---------- -
--------------- -----
---------------- -----
--
---------- -
--------- -----
----- ----------------
-
-如果需要使用自定义的配置，我们可以利用 critical-css.config.js 这个文件进行配置。在这个文件中，我们可以设置各种参数来满足自己的需求。下面是一个示例配置：
-------------- - - ----- ---- ---- ---------------------- ------- ---------------------- ------ ---- ------- ---- ------- -------------- ---- -------------------------------------------- ------- ----- ------- ---- -
在这个配置中，我们重新定义了 base、src、target 等参数。这些参数的具体含义如下：
- base：基准路径，默认为 process.cwd()，即当前工作目录。
- src：需要引入 critical 的 HTML 页面URL，由该页面引用的 CSS 会被提取出来并生成相应的临时文件。
- target：CSS 的文件路径，默认为 critical.css。
- inline：生成的 CSS 是否需要内联，默认为 false。
- minify：是否压缩生成的 CSS，默认为 true。
- width：Puppeteer 的窗口宽度，影响生成截图额大小。
- height：Puppeteer 的窗口高度。
- waitFor: 请确保所有必需的资源都已被加载时，等待 N 毫秒再执行 critical。
- ignore：指定想要跳过的 CSS 规则或选择器。
- css：要使用的 CSS 文件或 URL。
- force：强制在生成的 CSS 文件覆盖旧的文件。
- penthouse：Penthouse 的配置
- puppeteer：Puppeteer 的配置
critical-cli 命令
在 critical-cli 配置完成后，我们可以开始调用命令来对 CSS 进行截图，并进行相关操作了。最基础的命令是下面这样的：
-------- ----- ---- ---- --------- ----------
具体的调用方法如下：
-------- ---------------------- ----------- ------------ ------- --------
其中，--dimensions 375x667，表示 viewport 的大小，--inline 表示以内置样式文本的方式内联 CSS。
critical-cli 示例代码
下面是一些示例代码，以帮助读者更深入地了解 critical 的使用方法：
- 生成命令行参数：
--- ---- - - ---- --------------------- -- ---- --- ---- -------------------- -- ----- --- --- ----- ------------------ -- ----------- ------ ----- ------- ----- ------- ----- -- -------- --- ----- --- --
- 使用 API 进行构建：
-- ------ ---------------- --- --- ---- ----- ------------ --------- - - -------- - - ----- - - -------- - - - - - ------ - - --------- - - ------- - - ---------- - - -------- - - ----------- - - -------- - - ----------- - - -------- ------ - - --------- ------ ------- ---- ---- ---- ------
- 在 Gruntfile.js 中配置：
--------- -
-------- -
-- -- ----------- -----
-- ---------------------- --- -------- -------- ---
----- ----
---- -
-----------------
--
----------- -
-
------- ----
------ ---
--
-
------- ----
------ ----
-
--
----- -------------------------
------- ----
--
------------ -
---- --------------------
-
-经过本文的介绍，读者可以更好地了解 critical-cli 的使用方法。通过使用 critical-cli 进行 CSS 优化，我们可以大大提升网站的性能，提高用户体验。同时，了解 critical-cli 的使用方法也为开发者提供了新的思路，帮助他们发现新的优化方式。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600668e7d9381d61a3540b52