背景
在传统的服务器渲染(SERVER-SIDE RENDERING, SSR)应用中，在服务器上需要计算出关键CSS(critical CSS)，以便服务器将页面渲染出来并发送给客户端。然而，前端浏览器渲染的应用通常都是 SPA (Single Page Application)，所以需要通过JS来执行计算，并将关键CSS发送到客户端，以便快速加载关键CSS。
为了解决关键CSS计算的问题，我开发了一个npm包——holistic-router-criticalcss。该包为单页应用(SPA)计算关键CSS提供了一个快捷、方便、可靠的解决方案。
安装使用
安装
npm install --save-dev holistic-router-criticalcss
初始化使用
-- -------------------- ---- ------- ----- - -------------- - - --------------------------------------- ----- ------ - --- ---------------- ------- - - ----- ---- ---------- -- -- ---------------------------- -- - ----- --------- ---------- -- -- ----------------------------- -- - ----- ----------- ---------- -- -- -------------------------------- -- -- --- ---------------以上代码使用holistic-router-criticalcss创建了一个路由，并在启动时计算并输出关键CSS。router.start()方法将SPA应用的JavaScript代码注入到HTML中，这将触发路由器为每个路由计算关键CSS。在计算完成后，holistic-router-criticalcss将关键CSS输出到HTML中，并从HTML中删除未使用的CSS。
参数配置
HolisticRouter支持许多参数来配置关键CSS计算和生成的相关选项。以下是配置选项：
-- -------------------- ---- -------
----- ------ - --- ----------------
------- -
-
----- ----
---------- -- -- ----------------------------
--
-
----- ---------
---------- -- -- -----------------------------
--
-
----- -----------
---------- -- -- --------------------------------
--
--
--------
--------- ---------
----------------------
---------- ------
---------------------------------------------
---------- ------
--------------------------------
-------------------- ------------------------------
-----------------------------
-------------------- ---
-- -------------------------- ---
---------------------------------------
--------------- ------
-- ---------------------------
-------------- ----------
-- ----------------------------
--------------- ----------
-- ---------------------------
-------------------- ------
-----------------------------------
-------------- ----------
---示例
-- -------------------- ---- -------
----- - -------------- - - ---------------------------------------
----- ------ - --- ----------------
------- -
-
----- ----
---------- -- -- ----------------------------
--
-
----- ---------
---------- -- -- -----------------------------
--
-
----- -----------
---------- -- -- --------------------------------
--
--
---------- -----
-------------------- ----------
-------------- -----
--------------- ----
---
---------------以上的示例代码配置了关键CSS，包括将CSS内联到网页中、仅使用.hero选择器、将浏览器视口大小设置为1366 x 768像素。
总之，使用 holistc-router-criticalcss, 您能够最大限度地提高页面的加载速度，同时减少不必要的网络请求，并提供了一个完善的计算关键 CSS 的解决方案，避免了手动计算的麻烦和容易出错的可能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005607381e8991b448de9ce