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

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

• Код-сплиттинг (Code Splitting): разделение кода на части, которые загружаются по мере необходимости. Например, в Webpack это реализуется через динамический импорт import().

• Tree Shaking: удаление неиспользуемого кода из бандла. Поддерживается современными сборщиками, такими как Webpack и Rollup.

• Минификация и сжатие: использование плагинов для минификации (например, Terser) и gzip/brotli сжатия на сервере.

• Использование легковесных библиотек: замена тяжелых библиотек на более компактные аналоги.

• Ленивая загрузка (Lazy Loading): загрузка компонентов или модулей только при необходимости.

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

import React, { Suspense, lazy } from 'react';

const HeavyComponent = lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <div>
      <Suspense fallback={<div>Загрузка...</div>}>
        <HeavyComponent />
      </Suspense>
    </div>
  );
}

export default App;