Деление бандла на чанки (code splitting) — это техника, позволяющая разбивать большой JavaScript-бандл на более мелкие части, которые загружаются по мере необходимости. Это улучшает время загрузки и отзывчивость приложения.

Способы деления:

Динамический импорт — с помощью import() можно загружать модули по требованию.
Статическое разделение — например, с помощью настроек сборщика (Webpack, Rollup) можно указать точки разделения.

Разница между code splitting и делением на этапе билда:

Code splitting — концепция, которая может реализовываться как во время билда, так и динамически во время выполнения. Она ориентирована на оптимизацию загрузки.
Деление на этапе билда — конкретный момент, когда сборщик формирует отдельные чанки, основываясь на конфигурации и использовании динамических импортов.

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

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

const LazyComponent = lazy(() => import('./MyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

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

Как именно можно делить бандл на чанки? В чём разница между code splitting и делением на этапе билда?