我如何为 renderToNodeStream (React SSR)

如何解决我如何为 renderToNodeStream (React SSR)

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

问题 #1 - 关键 CSS 提取

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

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

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

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

解决方法

创建一个由 renderToNodeStream 返回的可读流的克隆。转成字符串，用css净化，得到关键的css。

https://github.com/theKashey/used-styles 与您想要的解决方案完全一样：

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