在前端开发中，我们经常需要开发或优化网站的性能，尤其是针对网站的加载速度进行优化。这个时候，我们会发现网站中一些静态资源的加载速度特别慢，需要进行特殊的优化。这时，就需要用到一个工具——critical。
本文将详细地介绍 critical 的使用，包括安装、配置以及命令的使用等。同时，我们还将提供一些示例代码，以方便读者更好地理解和掌握 critical 的使用方法。
安装 critical-cli
为了使用 critical，我们需要先在本地环境中安装 critical-cli。安装可以使用 npm 来进行，在命令行终端中输入以下命令即可：
npm install critical-cli -g
配置 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 进行截图，并进行相关操作了。最基础的命令是下面这样的：
critical <base url> <CSS filepath> <viewport>
具体的调用方法如下：
critical https://yourdomain.com ./myCSS.css --dimensions 375x667 --inline
其中，--dimensions 375x667，表示 viewport 的大小，--inline 表示以内置样式文本的方式内联 CSS。
critical-cli 示例代码
下面是一些示例代码，以帮助读者更深入地了解 critical 的使用方法：
- 生成命令行参数：
-- -------------------- ---- ------- --- ---- - - ---- --------------------- -- ---- --- ---- -------------------- -- ----- --- --- ----- ------------------ -- ----------- ------ ----- ------- ----- ------- ----- -- -------- --- ----- --- --
- 使用 API 进行构建：
// 使用第三方库 concurrently，将生成 CSS 和构建 HTML 同时进行。 concurrently 'critical ' + args.src + ' --css ' + args.css + ' ' + ' --base ' + args.base + ' --width ' + args.width + ' --height ' + args.height + ' --minify ' + args.minify + ' --inline --dest ' + args.dest --save --dev', 'npm some HTML 启动方式';
- 在 Gruntfile.js 中配置：
-- -------------------- ---- -------
--------- -
-------- -
-- -- ----------- -----
-- ---------------------- --- -------- -------- ---
----- ----
---- -
-----------------
--
----------- -
-
------- ----
------ ---
--
-
------- ----
------ ----
-
--
----- -------------------------
------- ----
--
------------ -
---- --------------------
-
-经过本文的介绍，读者可以更好地了解 critical-cli 的使用方法。通过使用 critical-cli 进行 CSS 优化，我们可以大大提升网站的性能，提高用户体验。同时，了解 critical-cli 的使用方法也为开发者提供了新的思路，帮助他们发现新的优化方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668e7d9381d61a3540b52