Оптимизация загрузки приложения
Вопрос
Приложение долго грузится. Как ты будешь разбираться?
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
сначала измерить: что именно медленно - сеть, сервер, JS, рендер
разделить TTFB, загрузку бандла, гидратацию и запросы данных
анализ бандла: что попало, нет ли дублей и тяжёлых зависимостей
разбиение по маршрутам и ленивая загрузка тяжёлых блоков
картинки: форматы, размеры, ленивость, приоритет для первого экрана
водопад запросов: параллелить или переносить на сервер
Что могут спросить следом
- Как найти, что раздувает бандл
- Что такое водопад запросов и как его убрать
- Как поставить бюджет производительности в CI
Разбор
Первым делом - измерить, а не гадать: Performance-панель и полевые метрики. Нужно разделить TTFB (сервер), загрузку и разбор JS, гидратацию и время до данных: лечатся они по-разному.
Дальше по порядку убывания эффекта: анализ бандла (дубли версий, тяжёлые библиотеки,
moment вместо date-fns, полный lodash вместо метода), разбиение по маршрутам и ленивая
загрузка редких блоков (редакторы, графики, карты), картинки (современный формат,
правильные размеры, loading=lazy, приоритет герою), устранение водопадов запросов.
Финальный шаг - не разовый: поставить бюджет размера бандла в CI, иначе через два месяца всё вернётся. Без бюджета в CI регрессия приходит незаметно.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.