Расскажите про подходы к оптимизации сборки и уменьшению размера бандла в проекте. Какие ещё способы оптимизации размера бандла вы знаете?

Основные подходы к оптимизации сборки

Оптимизация бандла направлена на уменьшение времени загрузки страницы и улучшение пользовательского опыта. Основные методы включают tree shaking, code splitting, минификацию и сжатие.

Tree Shaking

Tree shaking удаляет неиспользуемый код из модулей. Для этого используется статический анализ импортов. В Webpack это работает с ES-модулями (import/export). Пример:

// utils.js
export function used() { return 1; }
export function unused() { return 2; }
// main.js
import { used } from './utils';
console.log(used()); // unused() будет удален

Code Splitting

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

// React lazy loading
const LazyComponent = React.lazy(() => import('./LazyComponent'));
// Webpack dynamic import
button.addEventListener('click', () => {
  import('./module').then(module => module.default());
});

Минификация и сжатие

Минификация удаляет пробелы, комментарии и сокращает имена переменных. Webpack использует TerserPlugin. Сжатие (gzip/Brotli) на сервере уменьшает размер передаваемых данных.

Дополнительные методы

• Анализ бандла с помощью webpack-bundle-analyzer для выявления больших зависимостей.
• Замена больших библиотек (например, moment.js на date-fns).
• Использование CDN для статических ресурсов.
• Оптимизация изображений (сжатие, lazy loading).

Вывод: Применяйте tree shaking и code splitting для современных приложений, минификацию для продакшена, а анализ бандла поможет выявить узкие места. Это особенно полезно для крупных проектов с множеством зависимостей.