如何为 renderToNodeStream (React s-s-r) 块收集关键 css

Posted 2023-03-15

【中文标题】如何为 renderToNodeStream (React s-s-r) 块收集关键 css

【英文标题】：How do I collect critical-css for chunks of renderToNodeStream (React s-s-r)

【发布时间】：2021-08-26 06:08:10

【问题描述】：

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

问题 #1 - 关键 CSS 提取

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

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

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

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

【参考方案1】：

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

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

【讨论】：

不幸的是，文档非常糟糕，没有示例。既然你设法制作了这个包，不妨记录一下。

【参考方案2】：

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