前言
前端性能优化一直是一个非常重要的课题，而在其中一个方面，也就是页面速度优化方面，critical css 出现的时候将大大提高我们的优化效率，同时也能够提高我们的页面速度，让我们有更好的用户体验。
什么是 critical css？
首先请允许我简单地介绍一下 critical css 的概念。critical css 就是指用于首屏渲染的样式，在首次加载页面时需要下载并加载的这些样式，它能够帮助我们减少首屏的渲染时间，提高页面的加载速度，从而提高用户使用满意度。
什么是 neutrino-middleware-critical-css？
neutrino-middleware-critical-css 是一个基于 neutrino 框架的一个中间件，通过它我们能够非常方便地来生成 critical css，并将它们自动地注入到我们的 html 文件当中，而且只有当我们的环境变量为 production 的时候才会启用它。
neutrino-middleware-critical-css 安装
在开始使用之前，我们需要安装 neutrino-middleware-critical-css 这个库，执行以下命令即可进行安装：
npm install --save-dev neutrino-middleware-critical-css
neutrino-middleware-critical-css 使用
安装完成后，我们就可以开始使用 neutrino-middleware-critical-css 这个库了，我们需要在我们的 neutrino 配置文件中添加如下代码:
-- -------------------- ---- -------
----- - ---- - - ---------------
----- ------------------------ - ----------------------------------
-------------- - ---------- -- -
------------------------------------------------ --------- -- -
----- ----------------- - -
-- -- ------- ----
-------- -
-------- -
-- -------- ----------------------- --
--- --------------------------
-- -----------
---- ----------------------------- --------------
-- ------------
----- ----------------------------- --------------
-- ----------
------ ----
------- ----
-- -------------
--------- ---------------
------- -----
--
-
-
--
------ -
------- -----------------------------------
-------- -
-----------
------- -----------------
-
-
--
-在配置文件中，我们使用了 neutrino 的中间件属性进行了配置注入，同时需要使用 webpack-plugin-critical 这个插件进行配置，我们需要指定源文件路径和生成文件路径，以及生成文件的名称，同时由于生成的 css 文件非常重要，所以需要进行压缩，这些都可以在配置中来进行定义。在配置完成后，我们可以执行以下命令来启用 neutrino-middleware-critical-css:
$ NODE_ENV=production yarn run build
示例代码
-- -------------------- ---- -------
----- - ---- - - ---------------
----- ------------------------ - ----------------------------------
-------------- - ---------- -- -
------------------------------------------------ --------- -- -
----- ----------------- - -
-------- -
-------- -
--- --------------------------
---- ----------------------------- --------------
----- ----------------------------- --------------
------ ----
------- ----
--------- ---------------
------- -----
--
-
-
--
------ -
------- -----------------------------------
-------- -
-----------
------- -----------------
-
-
--
-总结
通过以上的学习，我们已经学习了 neutrino-middleware-critical-css 的使用教程，并且实现了它的使用方式，现在我们已经掌握了 critical css 的使用方法，这对于我们提高页面性能和提升用户使用体验有着非常重要的意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056e9e81e8991b448e761f