javascript - CSS-in-JS 不会阻止浏览器进行 CSS 缓存吗？

Question

我正在寻找使用服务器端渲染设置 React 应用程序样式的最佳实践。

我看到了不同的选择，例如使用 SASS 之类的预处理器，或者将样式放入 JS 代码中，例如 JSS、样式组件等。

玩 JSS，我看到它把样式放在 HTML 中的 head 部分。我只是使用以下示例来查看行为：

https://github.com/cssinjs/examples/tree/gh-pages/react-ssr

它不会阻止浏览器缓存 CSS 以将其放入 head 部分并因此增加连续页面加载时间吗？有没有办法使用 JSS 将样式设置到外部文件，以便浏览器可以缓存它？

Answer 1

您在该示例中看到的是关键 CSS。只有 CSS 专门用于该视图，它不应该被缓存，它比以阻塞方式加载外部资源更快，并且需要支付延迟。

关键 CSS 在这里是一种实际的性能优化。