Производительность
Bundle budgets: затащи роут под budget и удержи его
Читать про bundle budgets — не то же самое, что затащить реальный роут под бюджет. Возьми раздутое приложение, спрофилируй то, что юзер реально качает, применяй иерархию сокращения, пока роут не влезет в свой budget, затем заставь budget держаться CI-gate’ом и RUM-панелью — с доказательством на каждом шаге.
Преврати ментальную модель юнита в воспроизводимый инженерный цикл: проанализируй bundle, режь байты с критического пути в порядке приоритета, нейтрализуй налог third-party, форсируй budget в CI и подтверди реальный выигрыш числами Core Web Vitals до/после.
Возьми роут, поставляющий негабаритный JS bundle (своё приложение или стартер ниже), и затащи его под обоснованный per-route budget — доказывая каждое сокращение анализатором и репрезентативными для поля числами LCP/INP, затем загейти его в CI, чтобы он не мог регрессировать.
- Таблица до/после: gzip'нутый transfer, несжатый JS, LCP и INP — всё измерено под одним и тем же профилем 4× CPU-throttled mid-range mobile, не оценено и не с ноутбука без throttling.
- Treemap анализатора чётко показывает уменьшение чанка роута и пропавшие модули чужих роутов / мёртвые (перепроанализировано, а не предположено).
- Gate size-limit закоммичен и наглядно валит нарочно превышающий budget PR, затем проходит после того, как добавку сплитнули или budget формально подняли.
- Абзац-разбор: какой рычаг применён для каждого топового модуля и почему splitting/shaking встали выше compression и тюнинга.
- Хотя бы один third-party скрипт показан убранным с main thread, с временем main thread до/после, которое он занимал.
- Добавь док протокола budget-raise и квартальный храповик на 10%, чтобы budget ужимался со временем, а не дрейфовал вверх; покажи один проработанный raise-PR с обоснованием и sign-off.
- Подключи 103 Early Hints (или modulepreload) для критического чанка и шрифта и замерь дельту LCP на P95; проверь в Network-панели, что ресурс стартует до завершения HTML.
- Добавь SRI integrity-хэши на все third-party script-теги и CSP script-src allow-list, затем покажи скрипт с неперечисленного origin, отклонённый браузером.
- Проверь, что приоритеты HTTP/3 RFC 9218 учитываются end-to-end: осмотри колонку Priority Network-панели, и если CDN их игнорит, задокументируй misconfiguration и его замеренную стоимость для прихода критического чанка.
Это цикл, который ты будешь гонять на каждом раздутом роуте: сначала анализ, режь байты с критического пути в порядке приоритета (split, затем lazy-load, затем shake, затем vendor-split, затем compress), нейтрализуй налог third-party, форсируй budget CI-gate’ом и подтверждай числами Core Web Vitals до/после на throttled mobile-профиле — затем держи RUM, следящий за дрейфом, который синтетика упускает. Сделав это раз на реальном роуте, ты доводишь production-версию до уровня мышечной памяти.