在现代 Web 开发中，网站速度成为了重要的考虑因素，而用户的首次访问时间则是该过程中特别需要注意优化的关键点之一。为了缩短网站加载时间，减少 HTTP 请求的数量和文件大小是必要的。在这个过程中，Critical CSS 插件成为了一个非常有效的工具。在这篇文章中，我们将学习如何使用 npm 包 critical-css-webpack-plugin 来帮助优化我们的网站。
什么是 Critical CSS？
Critical CSS，也称为 Above the Fold CSS，在页面加载时会直接显示在浏览器的视线区域内。换句话说，它是页面 CSS 中最重要和最紧要的部分。由于此部分特别重要，因此它通常被打包为单独的 CSS 文件并在页面渲染时首次加载，在之后的渲染中进行呈现。
为什么要使用 Critical CSS？
Critical CSS 可以帮助缩短网站加载时间，因为它可以在页面首次渲染时尽快显示内容，而不需要等待其他的资源请求。这能够帮助改善用户体验、减轻服务器压力，提高网站排名，同时能够节省许多带宽和数据流量。
安装步骤
在开始之前，我们需要确保已经在项目中安装了 Webpack 和相关插件。然后，我们可以通过 npm 包的方式安装 critical-css-webpack-plugin。
--- ------- ---------- ---------------------------
如何使用 Critical CSS Webpack 插件
使用 Critical CSS Webpack 插件时，我们需要指定两个输入项和两个输出项。输入项是 HTML 文件和打包后的 CSS 文件，输出项表示 Critical CSS 插件将生成的临时 CSS 文件和 HTML 文件。我们可以在 Webpack 配置文件中进行如下配置：
----- ------------------------ - ---------------------------------------
-------------- - -
-- --------
-------- -
--- --------------------------
----- ----------------------- --------
---- -------------
----- ---------------
-------- -----
---
--
--在这个配置中，我们将 HTML 文件设置为“index.html”，CSS 文件设置为“critical.css”，并且使用了“extract”选项。这个选项指定了是否提取临时 CSS 文件。
示例代码
----- ---- - ----------------
----- ----------------- - -------------------------------
----- -------------------- - -----------------------------------
----- ------------------------------ - ----------------------------------------------
----- ------------ - ---------------------------------
----- ------------------------ - ---------------------------------------
-------------- - -
------ -----------------
------- -
----- ----------------------- --------
--------- ------------
--
----- -------------
------------- -
---------- ---- --------------------------------- --- ----------------
--
------- -
------ -
-
----- ---------
---- ----------------------------- --------------
--
--
--
-------- -
--- ---------------------- --------- ---------------- ---
--- ------------------- --------- ------------------ ---
--- --------------------------
----- ----------------------- --------
---- -------------
----- -------------------
-------- -----
---
--
--总结
使用 npm 包 critical-css-webpack-plugin 可以将网站的关键 CSS 部分提取出来，以确保尽快在网页加载时进行渲染，从而提高网站的性能和用户体验。通过此插件导出的关键 CSS 文件可以非常有效的缩短首字节所需时间，同时节省带宽和数据流量，大大减轻服务器的负担。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/critical-css-webpack-plugin