#npm 包 webpack-critical 使用教程
首先，什么是 webpack-critical？
webpack-critical 是一个 npm 包，用于提取并内联关键 CSS。它可以帮助你去除 CSS 中未使用的代码，从而减小 CSS 的文件大小并提高页面加载速度。
##安装
使用 npm 安装：
npm install webpack-critical --save-dev
##使用
webpack-critical 可以作为 webpack 插件使用。在webpack.config.js 中配置如下：
-- -------------------- ---- -------
----- --------------- - ----------------------------
-------------- - -
-- ----
-------- -
--- -----------------
----- ----------------------- -------
---- -------------
------- -----
------- -----
------ -----
------- ----
---------- -
---------------- ------
--
------- -------------------
---
--
--配置说明：
base: 项目根目录src: 要提取关键 CSS 的页面inline: 是否将关键 CSS 内联到页面，如果为 false，将生成一个新的 CSS 文件minify: 是否压缩生成的关键 CSSwidth: 浏览器窗口宽度height: 浏览器窗口高度penthouse: penthouse 配置，可以了解 penthouse 的配置项ignore: 忽略某些 CSS 文件，可以是一个正则表达式数组
将 webpack-critical 添加到 webpack 配置后，运行 webpack 命令即可运行插件。插件会生成一个新的文件，持久缓存的文件名以所有引用文件的哈希值命名。然后，该文件可以直接引用。如果 inline 为 true，则会将该 CSS 文件内联到 HTML 文件中。
##实例
假设我们有一个 HTML 页面和一个 CSS 文件，其中只有 .box 类使用了 CSS，我们需要提取关键 CSS 并将其内联到 HTML 中。
-- -------------------- ---- -------
---- ---------- ---
--------- -----
------
------
----- --------------- --
----------------------- ---------------
---- ---- --- ---- -- --- ---- ---
----- ---------------- ----------------- --
---- ---- --- ---- -- ---- ---
----- ---------------- ----------------- --
-------
------
---- ------------------ ------------
-------
--------- -------------------- ---- ------- -- ---------- -- --------- - ------ ---- - -- ---------- -- ---- - ----------------- ----- -
修改 webpack.config.js 如下：
-- -------------------- ---- -------
----- --------------- - ----------------------------
----- ---- - ----------------
-------------- - -
----- --------------
------ -----------------
------- -
--------- ------------
----- ----------------------- --------
--
-------- -
--- -----------------
----- ------------------------
---- -----------------
------- -----
---
--
--运行 webpack 命令后，会在 dist 目录下生成一个新的 HTML 文件和一个内联 CSS 文件 critical.css，我们可以在新 HTML 文件中引用该文件并且可以看到只有 .box 类的 CSS 被提取了。
-- -------------------- ---- -------
---- --------------- ---
--------- -----
------
------
----- --------------- --
----------------------- ---------------
-------
---- -
----------------- -----
-
--------
-------
------
---- ------------------ ------------
-------
-------##总结
使用 webpack-critical 开发者可以方便地提取关键 CSS 代码并将其内联到 HTML 中，从而减小 CSS 的文件大小并提升页面加载速度。使用方便，只需要作为 webpack 插件配置即可。但是需要注意，webpack-critical 对于一些 jQuery 等框架也会提取 CSS，请谨慎使用。
希望这篇文章能够帮助前端开发者更愉快地开发和优化项目。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60057c3b81e8991b448ebc35