Разве CSS-in-JS не мешает браузеру кэшировать CSS?

Question

Я ищу лучшие практики для стилизации приложения React с помощью рендеринга на стороне сервера.

Я вижу различные варианты, такие как использование препроцессоров, таких как SASS, или помещение стилей внутри кода JS, таких как JSS, компоненты стиля и т. Д.

Играя вокруг JSS, я вижу, что он помещает стили в заголовок раздела внутри HTML. Я просто использую следующий пример, чтобы увидеть поведение:

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

Разве это не помешает браузерам кэшировать CSS, чтобы поместить его в заголовочный раздел и, следовательно, увеличить время последовательной загрузки страницы? Есть ли способ поместить стиль во внешний файл с помощью JSS, чтобы браузер мог его кэшировать?

Answer 1

В этом примере вы видите Критический CSS.Только CSS используется именно в этом представлении, он не должен кэшироваться, это быстрее, чем загрузка внешнего ресурса блокирующим способом и оплата с задержкой.

Критический CSS - это реальная оптимизация производительностиздесь.