Разве CSS-in-JS не мешает браузеру кэшировать CSS?
Я ищу лучшие практики для стилизации приложения React с рендерингом на стороне сервера.
Я вижу разные варианты, такие как использование препроцессоров, таких как SASS, или размещение стилей внутри кода JS, таких как JSS, стилизованные компоненты и т. д.
Играя с JSS, я вижу, что он помещает стили в раздел заголовка внутри HTML. Я просто использую следующий пример, чтобы увидеть поведение:
https://github.com/cssinjs/examples/tree/gh-pages/реагировать-ssr
Разве это не помешает браузерам кэшировать CSS, чтобы поместить его в раздел заголовка и, следовательно, увеличить время последовательной загрузки страницы? Есть ли способ поместить стиль во внешний файл с помощью JSS, чтобы браузер мог его кэшировать?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
В этом примере вы видите критический CSS. Это только CSS, который используется специально для этого представления, он не должен кэшироваться, это быстрее, чем загрузка внешнего ресурса блокирующим способом и оплата с задержкой.
Критический CSS — это реальная оптимизация производительности.
Вот почему нам нужен CSS, который фактически используется на странице, а не все, что потенциально может быть использовано после того, как произойдут действия пользователя. Обычно это не так много, и по сравнению с ценой задержки этот компромисс лучше.
Вот почему CSSinJS имеет большое значение, потому что он знает, какой CSS на самом деле используется.
Еще один момент заключается в том, что эти оптимизации особенно важны для одностраничных приложений.
Спасибо @Oleg, если бы я использовал один блокирующий файл CSS для всего приложения React SSR, загрузка страницы заняла бы немного времени, и пользователь какое-то время видел бы пустую страницу. После этого каждая перезагрузка страницы будет выполняться быстрее, если не будет очищен кеш браузера. С другой стороны, если бы я использовал CSSinJS, он загрузил бы только необходимый CSS внутри раздела заголовка, что быстрее, чем загрузка всего CSS, но то же самое было бы для перезагрузки страницы. Как вы сказали, это похоже на компромисс с точки зрения скорости загрузки страницы.
Да, это окупается, когда у вас есть SPA или относительно небольшая полезная нагрузка критически важного CSS.
Я понимаю, что лучше загружать HTML с требуемым CSS для этой страницы внутри раздела заголовка, а не ждать блокирующей загрузки CSS. Это достаточно справедливо. Меня беспокоит следующая загрузка страниц. Предполагая, что у нас есть большие данные о стилях для страницы, каждый раз, когда мы обновляем страницу, нам придется загружать один и тот же большой пакет HTML+CSS, в то время как мы можем использовать кэширование браузера.