Как решить проблему общего хедера при агрессивном code splitting?

Когда приложение агрессивно делится на чанки (например, каждая страница — отдельный бандл), общие компоненты вроде хедера могут дублироваться в каждом чанке. Это происходит, если каждый маршрут импортирует хедер напрямую, и сборщик не может вынести его в общий модуль. В результате растёт размер бандла и хедер загружается многократно.

Причины дублирования

• Каждый динамический импорт создаёт отдельный граф зависимостей.
• Webpack по умолчанию не всегда выносит общие модули в shared-чанк при агрессивном splitting.
• React.lazy применяется к страницам, но общие компоненты остаются внутри них.

Способы решения

1. SplitChunksPlugin в Webpack — настроить cacheGroups так, чтобы общие модули (например, из папки components/common) попадали в отдельный чанк.
2. Динамический импорт общего модуля — импортировать хедер через React.lazy один раз на уровне layout, а не внутри каждой страницы.
3. Layout-компонент — вынести хедер в общий layout, который рендерится вне динамических чанков.

Пример настройки Webpack

module.exports = {
  optimization: {
    splitChunks: {
      cacheGroups: {
        common: {
          test: /[\\/]components[\\/]common[\\/]/,
          name: 'common',
          chunks: 'all',
          minChunks: 2,
          enforce: true,
        },
      },
    },
  },
};

Пример с React.lazy и layout

const Header = React.lazy(() => import('./Header'));

function Layout({ children }) {
  return (
    <>
      <Suspense fallback={<div>Loading...</div>}>
        <Header />
      </Suspense>
      {children}
    </>
  );
}

// Страницы импортируются динамически, но layout общий
const PageA = React.lazy(() => import('./PageA'));

Такой подход гарантирует, что хедер загрузится один раз и будет переиспользован всеми страницами, а не дублироваться в каждом чанке.

Итог: применяйте вынос общих компонентов в shared-чанк или общий layout, когда используете агрессивный code splitting — это уменьшает размер бандла и ускоряет загрузку.