Какими подходами или библиотеками пользовались для оптимизации размера бандла?

Для оптимизации размера бандла во frontend-разработке применяются следующие подходы и инструменты:

• Code splitting — разделение кода на части, которые загружаются по мере необходимости (например, с помощью динамического импорта в Webpack).
• Tree shaking — удаление неиспользуемого кода при сборке, поддерживается такими сборщиками как Webpack, Rollup.
• Минификация и сжатие — уменьшение размера файлов за счёт удаления пробелов, комментариев и сокращения имён переменных (Terser, UglifyJS).
• Использование CDN и кеширования — для быстрой загрузки и повторного использования ресурсов.
• Оптимизация зависимостей — замена тяжёлых библиотек на более лёгкие аналоги, импорт только нужных функций.

Пример с Webpack динамическим импортом:

// Вместо обычного импорта
// import LargeComponent from './LargeComponent';

// Используем динамический импорт для code splitting
const LargeComponent = React.lazy(() => import('./LargeComponent'));

Это позволяет загружать LargeComponent только тогда, когда он действительно нужен, уменьшая первоначальный размер бандла.