Как уменьшить бандл
Вопрос
Бандл приложения весит 2 МБ, страница долго грузится. Как бы ты искал и исправлял проблему?
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
сначала измерить: анализатор бандла (rollup-plugin-visualizer, webpack-bundle-analyzer)
найти тяжёлые зависимости и заменить или импортировать точечно
code splitting по маршрутам и тяжёлым компонентам через import()
проверить, что tree shaking работает: ESM, sideEffects
не тащить полифилы и транспиляцию под старые браузеры без нужды
сжатие gzip/brotli и кеш с хешами
Что могут спросить следом
- Как понять, что библиотека не tree-shakeable?
- Что лучше: один большой чанк или много маленьких?
- Как проверить результат после оптимизации?
Разбор
Сначала мерю, а не гадаю: включаю анализатор бандла и смотрю, кто занимает место. Чаще всего виноваты тяжёлые библиотеки целиком: moment с локалями, lodash через require, иконки одним импортом, графики на главной. Их заменяю на лёгкие аналоги или импортирую точечно из ESM-версий. Дальше режу код по маршрутам и тяжёлым виджетам через import() и lazy, чтобы на первой загрузке был только нужный JS. Проверяю, что tree shaking реально работает: пакеты в ESM, у библиотек правильный sideEffects. Смотрю browserslist: если целимся в современные браузеры, лишние полифилы не нужны. На сервере включаю brotli и долгий кеш для хешированных файлов. В конце снова мерю размер и Web Vitals, чтобы убедиться, что стало лучше.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.