В каком количестве bundle осуществлял сборку проекта

Сборка проекта в несколько bundle файлов

Что такое bundling и зачем несколько бандлов

Bundling — это процесс объединения всех модулей, зависимостей и ресурсов проекта в один или несколько файлов для отправки браузеру. Вместо загрузки сотен отдельных JS файлов браузер загружает несколько бандлов.

Разделение на несколько бандлов имеет смысл для:

1. Оптимизации — параллельная загрузка нескольких файлов
2. Кэширования — изменение одного бандла не инвалидирует кэш всего кода
3. Ленивой загрузки — не загружать код фич, которые пользователь не использует
4. Разделения по размеру — чтобы не было одного гигантского файла

Типичная структура бандлов

// Обычно проект собирается в 3-4 основных бандла:

// 1. main.js (или app.js) — основной код приложения
// 2. vendor.js (или libs.js) — внешние библиотеки (React, Vue и т.п.)
// 3. runtime.js — webpack runtime и manifest
// 4. chunk-*.js — динамические импорты и code splitting

Next.js и современные фреймворки

// Next.js автоматически создаёт несколько бандлов:

// _next/static/chunks/main-*.js
// _next/static/chunks/pages/index-*.js
// _next/static/chunks/pages/about-*.js
// Отдельные бандлы для каждой страницы (автоматический code splitting)

Code Splitting стратегии

// 1. Route-based splitting (Next.js делает автоматически)
const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));
// Каждая страница загружается отдельно

// 2. Component-based splitting
const HeavyModal = lazy(() => import('./components/HeavyModal'));
// Модальное окно загружается только когда нужно

// 3. Vendor splitting
// webpack конфиг отделяет node_modules в отдельный бандл
// Библиотеки меняются редко, кэш сохраняется дольше

Webpack конфигурация для нескольких бандлов

// webpack.config.js
module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        // Отдельный бандл для React и зависимостей
        react: {
          test: /[\\\\/]node_modules[\\\\/](react|react-dom)[\\\\/]/,
          name: 'react-vendors',
          priority: 10,
        },
        // Отдельный бандл для остальных libs
        vendors: {
          test: /[\\\\/]node_modules[\\\\/]/,
          name: 'vendors',
          priority: 5,
        },
        // Общий код, используемый несколькими чанками
        common: {
          minChunks: 2,
          priority: 0,
          reuseExistingChunk: true,
        },
      },
    },
  },
};

Vite и современные бандлеры

// vite.config.js
export default {
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          'react-vendor': ['react', 'react-dom'],
          'ui-components': ['./src/components/ui'],
        },
      },
    },
  },
};

Практический пример в реальном проекте

// Типичная структура бандлов в production:

// Размеры бандлов (условный пример):
// main.js — 150 KB (основной код приложения)
// react-vendors.js — 180 KB (React + React-DOM)
// vendors.js — 400 KB (остальные библиотеки)
// pages/dashboard.js — 80 KB (дорогостоящая страница)
// pages/settings.js — 50 KB (простая страница)

// Всего с gzip: ~450 KB вместо ~1.5 MB в одном файле

Анализ размера бандлов

// Инструменты для анализа:

// 1. webpack-bundle-analyzer
import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
plugins: [new BundleAnalyzerPlugin()]

// 2. source-map-explorer
npm run build
source-map-explorer 'dist/**/*.js'

// 3. Rollup plugin visualizer
import visualizer from 'rollup-plugin-visualizer';
plugins: [visualizer()]

Best Practices для оптимальной сборки

// ✅ Используй dynamic imports для большого функционала
const adminPanel = () => import('./features/admin');

// ✅ Отдели vendor код в отдельный бандл
// Он меняется реже и кэшируется дольше

// ✅ Используй tree-shaking для удаления неиспользуемого кода
// Убедись, что package.json имеет "sideEffects": false

// ❌ Не создавай слишком много маленьких бандлов
// Overhead от загрузки множества файлов может замедлить приложение

// ❌ Не забывай про критический путь
// Главный бандл должен быть минимальным для быстрой первой загрузки

Итог

Модерные проекты обычно собираются в 3-5 основных бандлов:

• Основной бандл приложения
• Vendor/библиотеки
• Runtime (опционально)
• Динамические чанки для отдельных страниц или модулей

Это правильный баланс между количеством файлов, размером и производительностью. Слишком мало бандлов = плохое кэширование, слишком много = overhead от множественных запросов.