Как называется оператор ??

Code Splitting в Webpack

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

Основные типы чанков

1. Entry Chunk

Записывается на основе точек входа (entry points), определённых в конфигурации Webpack. Обычно это основной чанк приложения.

module.exports = {
  entry: {
    main: './src/index.js',
    admin: './src/admin.js'
  },
  output: {
    filename: '[name].[contenthash].js',
    path: __dirname + '/dist'
  }
};

В этом примере будут созданы два entry chunks: main и admin.

2. Async Chunks (Dynamic Import Chunks)

Это чанки, которые загружаются динамически при помощи import() (dynamic import). Они не включаются в основной бандл, а загружаются по требованию.

// Динамический импорт создаёт отдельный чанк
const moduleA = await import('./moduleA.js');
const moduleB = await import('./moduleB.js');

// При использовании React
const LazyComponent = React.lazy(() => import('./Component.js'));

3. Vendor Chunks

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

module.exports = {
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          priority: 10,
          reuseExistingChunk: true
        }
      }
    }
  }
};

4. Common Chunks

Чанки, которые используются несколькими entry points или async chunks. Webpack автоматически выделяет общий код в отдельный чанк, чтобы избежать дублирования.

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        common: {
          minChunks: 2,
          priority: 5,
          reuseExistingChunk: true,
          name: 'common'
        }
      }
    }
  }
};

Конфигурация SplitChunks

Основной механизм разделения кода - это optimization.splitChunks:

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',          // 'async', 'initial', 'all'
      minSize: 20000,         // Минимальный размер чанка в байтах
      minChunks: 1,           // Минимальное количество чанков, где используется модуль
      maxAsyncRequests: 30,   // Максимум асинхронных запросов
      maxInitialRequests: 30, // Максимум начальных запросов
      cacheGroups: {          // Определение групп кеширования
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: 10
        },
        common: {
          minChunks: 2,
          priority: 5,
          reuseExistingChunk: true
        }
      }
    }
  }
};

Практический пример с Multiple Entry Points

module.exports = {
  entry: {
    app: './src/app.js',
    vendor: './src/vendor.js'
  },
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  },
  output: {
    filename: '[name].[contenthash].js',
    path: __dirname + '/dist'
  }
};

В результате будут созданы чанки: app.js, vendor.js и возможно common.js (если есть общий код).

Преимущества Code Splitting

1. Уменьшение начального размера бандла - пользователи загружают только необходимый код
2. Улучшение кеширования - vendor чанки меняются реже и кешируются браузером дольше
3. Параллельная загрузка - браузер может загружать несколько чанков одновременно
4. Лучшая производительность - маленькие бандлы парсятся и выполняются быстрее

Правильная конфигурация code splitting критична для оптимизации Web приложений и улучшения пользовательского опыта.