JS · React · веб-перформанс · разработка и архитектура Твитер: https://twitter.com/iamakulov Помогу с производительностью: https://3perf.com По всем вопросам (рекламу не продаю): @iamakulov Чатик канала: @iamakulov_channel_chat
Оценить канал iamakulov_channel и оставить отзыв — могут только зарегестрированные пользователи. Все отзывы проходят модерацию.
5 звезд
0
4 звезд
0
3 звезд
0
2 звезд
1
1 звезд
1
Последние сообщения 7
2021-07-26 11:47:45
Вот пример, где, может, всё хорошо, а, может, и нет:
С таким кодом браузер начнёт грузить шрифты раньше, чем разберётся, какие именно ему шрифты нужны. Из-за этого, даже если страница не использует Roboto 500, этот файл всё равно скачается (и заберёт трафик у более важных ресурсов).
Если используете для шрифтов, проверьте, чтобы у вас не грузилось лишнего.
Вот пример, где всё хорошо:
С такими стилями (без ) браузер загрузит только те файлы шрифта, которые ему нужны. Если на странице не используется Roboto с насыщенностью 500, браузер его просто не загрузит.
2021-07-19 07:58:50
Профайлер можно сделать ещё полезнее.
Откройте настройки React DevTools → Profiler и включите «Record why each component rendered while profiling». После этого профайлер начнёт записывать и показывать, почему каждый компонент перерисовался:
2021-07-12 16:27:33
В следующий раз вместо styled-components попробуйте, например, Linaria. У Linaria похожее API, но она генерирует стили во время билда и от таких проблем не страдает. (В комментариях часто жалуются на какие-то проблемы с Linaria, но мне последние версии нравятся.)
Ещё по теме: https://calendar.perfplanet.com/2019/the-unseen-performance-costs-of-css-in-js-in-react-apps/
И
