Я писал, что можно не получить профитов от кеширования:
Вот статья первая статья, для меня оказалась крайне полезной: v8.dev/blog/cost-of-j…
В чем же соль?
TL;DR: Используйте Cache API для статики в Service Worker. Этим вы экономите время исполнения кода, улучшаете TTI.
Дело в том, что не все браузеры кешируют файлы меньше 1Кб. За счет этого мы можем не получить профита от того, что выносим js из inline кода в блокирующий ресурс.
Как устроено кеширование в хроме? Здесь на эту тему хорошо написано: v8.dev/blog/code-cach…
Вся информация дальше — это компиляция из этих статей. Эдакий TL;DR. Справедливо для chromium браузеров
У нас есть 3 способа "запуска" кода. Cold run, warm run и hot run:
Cold run — пользователь пришел впервые. Браузер скачал файл, скормил его компилятору (транспилятору)
Warm run — пользователь пришел повторно. Браузер взял код из кеша, скормил его компилятору.
Hot run — пользователь пришел в 3-й раз за последние 72 часа.
Браузер взял код и метаданные из кеша. Метаданные десериализуются и исполняются. Компилировать не нужно.
Всем хочется исполняться на в hot run версии. Очевидно, что она экономит время.
Первый способ экономить время — не пишите код ¯_(ツ)_/¯
Кроме того, не забывайте про etag и заголовки для кеширования кода.
Есть интересный хак, чтобы забустить hot run. Используйте Cache API от Service worker
"Магия" здесь в том, что файл, кешированный сервис воркером не будет парситься повторно, метаданные будут присутствовать.
Вот так сейчас выглядит загрузка hh.ru:
