Как уменьшить размер бандла модулями
Вопрос
Бандл приложения весит несколько мегабайт. Как бы вы уменьшили то, что пользователь скачивает при первом заходе, используя возможности модулей?
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
Сначала измерить: анализатор бандла, что занимает место
Code splitting по маршрутам и тяжёлым виджетам через `import()` и `React.lazy`
Tree shaking: ESM-версии библиотек, точечные импорты, `sideEffects: false`
Замена тяжёлых зависимостей легковесными или нативными API
Предзагрузка вероятных чанков (`modulepreload`, prefetch) после первой отрисовки
Контроль в CI: лимиты размера бандла
Что могут спросить следом
- Почему
import _ from 'lodash'хуже, чемimport debounce from 'lodash-es/debounce'? - Чем prefetch отличается от preload?
- Как не показывать пользователю пустой экран, пока грузится чанк?
Разбор
Образцовый ответ: «Первым делом смотрю, из чего бандл состоит, через rollup-plugin-visualizer или webpack-bundle-analyzer, и ищу крупные зависимости. Дальше три направления. Разделение кода: всё, что не нужно на первом экране, загружаю динамическим import(). Маршруты оборачиваю в React.lazy с Suspense, тяжёлые виджеты вроде редактора, графиков и карт подгружаю по действию пользователя. Второе: tree shaking. Проверяю, что библиотеки подключены в ESM-сборке, например lodash-es вместо lodash, импорты точечные, и пакет помечен sideEffects: false. Третье: заменяю тяжёлое лёгким, например moment на Intl или date-fns. Чтобы переходы не тормозили, после загрузки страницы делаю prefetch вероятных чанков. И закрепляю результат лимитом размера бандла в CI, чтобы он не вырос снова незаметно».
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.