Что такое code splitting в Webpack?

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

Множественные точки входа:
Разделение на уровне конфигурации:

entry: {
  	main: './src/index.js',
  	admin: './src/admin.js',
},
output: {
  	filename: '[name].bundle.js', // main.bundle.js и admin.bundle.js
},

Динамические импорты:
Загрузка модулей по запросу:

import('./module.js').then((module) => {
  	module.default();
});

Оптимизация общих зависимостей:
Использование SplitChunksPlugin для выделения общих модулей в отдельный файл:

optimization: {
  	splitChunks: {
    		chunks: 'all',
  	},
},

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