前言
随着互联网的发展，网站的性能优化变得越来越重要。其中一项重要的性能优化手段是减少页面的加载时间。在实现这一目标的过程中，使用“关键路径渲染”技术可以提高页面的呈现速度。在本文中，我们将介绍一个 npm 包 @medturki/inline-critical，它能够帮助我们实现“关键路径渲染”技术，从而提高页面性能。
什么是 @medturki/inline-critical？
@medturki/inline-critical 是一个 npm 包，它使用 critical 库实现“关键路径渲染”技术。它可以自动提取 HTML 文件中的关键 CSS 规则，并将其内联到 HTML 文件中，从而避免了多次请求。
安装 @medturki/inline-critical
在使用 @medturki/inline-critical 之前，我们需要将其安装到我们的项目中。可以使用以下命令安装：
npm install --save-dev @medturki/inline-critical
使用 @medturki/inline-critical
@medturki/inline-critical 的使用非常简单，只需要执行以下命令即可：
inline-critical <input-file> <output-file> [<css-file>]
其中，<input-file> 是要处理的 HTML 文件路径，<output-file> 是生成的 HTML 文件路径，<css-file> 是要内联的 CSS 文件路径。
如果我们在项目根目录下有一个 index.html，而我们想要生成一个内联 CSS 的 index-inline.html，可以使用以下命令：
inline-critical index.html index-inline.html
如果我们需要指定要内联的 CSS 文件，可以使用以下命令：
inline-critical index.html index-inline.html styles.css
@medturki/inline-critical 示例代码
下面是一个示例代码，它将 index.html 文件中的关键 CSS 规则内联到 index-inline.html 中：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
-------------------------------- ----------
----- ---------------- ------------------
-------
------
--------
----------------------------- -------
---------
------
---
------ ------------------------- ------------------- ---- ------ --- ----- ---- -------------
----
-------
------- ----------------------
------- ----------------------------
------- -----------------------------------------------------------
-------
-------使用以下命令生成内联 CSS 的 HTML 文件：
inline-critical index.html index-inline.html styles.css
生成的 index-inline.html 如下：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
-------------------------------- ----------
------------------------------------------ ----------------------------------------- ----- ---------------- - ------------------------------------------------------------- --------------------- ------------------------------------------------------------ ---------- - -------------
-------
------
--------
----------------------------- -------
---------
------
---
------ ------------------------- ------------------- ---- ------ --- ----- ---- -------------
----
-------
------- ----------------------
------- ----------------------------
------- -----------------------------------------------------------
-------
-------总结
通过使用 @medturki/inline-critical，我们可以实现页面的“关键路径渲染”，从而提高页面性能。它的使用非常简单，只需要执行一个命令即可实现。在实际项目中，我们可以将其集成到构建工具中，以便更加方便地使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bcb967216659e2446a3