0

我想critical-css为React SSR. 有很多方法可以实现这一点，但我对这种方法特别感兴趣——我计划在 react 渲染 html 后即时收集它。我在服务器上有 css，我想从中内联只需要的 css 并异步加载其余部分（我不确定性能，但我看到生产解决方案使用 purifyCSS 等工具执行此操作，所以我打算试一试并测量它表现）

问题 #1 - 关键 CSS 提取

我的 SSR 设置是基于renderToNodeStream而不是renderToString所以我不能这么容易地将 html 与 css 进行比较 - 块可能只是一段无效的 html 而没有结束标签。在这种情况下，如何有效地正确解析类名？我猜RegExp在这里可能会很慢？

问题 #2 - 将样式内联到 html 块中

我的计划是获取chunk of html来自renderToNodeStream并内联对应css的响应 - 所以它的工作方式类似于interleaveWithStyles方法styled-components

这是块在styled-components处理它后的样子——<style>节点可能被插入到中间<svg>——我想这不是问题，只要我最终会加载完整的 css，但这并不安全，因为这个节点可能很容易被删除，例如通过反应水合物。那么使用内联 css 丰富 html 流的正确方法是什么？

在此处输入图像描述

4

2 回答 2

1

创建一个由 renderToNodeStream 返回的可读流的克隆。将其转换为字符串并使用 css 进行净化以获得关键 css。

于 2021-07-20T12:06:12.740 回答
0

https://github.com/theKashey/used-styles完全按照您想要的解决方案工作：

  • 扫描您的构建文件夹以查找您可以使用的所有样式
  • 扫描您的 HTML 输出，收集使用的样式（因此名称）
  • 内联对使用的样式文件的引用以及批量（renderToString）和流（renderToNodeStream）模式中的规则
  • 在应用开始之前将所有注入的代码移到渲染器标记之外，以允许正确的水合。
于 2021-07-21T00:17:30.767 回答