Какой сборщик используешь в проекте?

Какой сборщик используешь в проекте?

Основные сборщики в современной разработке

На 2026 год в переднем крае технологий находятся несколько инструментов:

Webpack — классический выбор, используется в Create React App и множестве legacy проектов. Предоставляет огромную гибкость через лоадеры и плагины, но конфигурация может быть сложной.

Vite — последние годы набирает популярность благодаря скорости разработки. Использует ES modules нативно в dev режиме, значительно ускоряя hot reload. Production сборка на базе Rollup.

Next.js (встроенный sborщик на Turbopack) — для React приложений с SSR/SSG. Скрывает сборщик под капотом, предоставляя простой API через file-based routing.

Turbopack — новое поколение, написан на Rust, интегрирован в Next.js 14+. Обещает огромную скорость.

esbuild — быстрый минификатор и бандлер, часто используется как часть пайплайна.

Мой опыт и рекомендации

В зависимости от типа проекта:

// === Для нового React проекта (SPA) ===
// Рекомендую: Vite
// Причины:
// - Быстро стартует dev server (~500ms)
// - Простая конфигурация (vite.config.js)
// - Отличная поддержка React плагинов
// - Меньше бойлерплейта чем Webpack

import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
  },
  build: {
    outDir: 'dist',
    sourcemap: false,
  },
});

// === Для Next.js приложения ===
// Рекомендую: Next.js встроенный + Turbopack (в prod режиме)
// Причины:
// - Integrated solution
// - File-based routing
// - Built-in API routes
// - Image optimization
// - SSR/ISR поддержка

// next.config.js
const nextConfig = {
  output: 'standalone',
  experimental: {
    turbopack: true, // для dev режима (Next.js 16)
  },
};

module.exports = nextConfig;

// === Для Legacy проектов ===
// Остаемся: Webpack
// Причины:
// - Большое сообщество
// - Множество лоадеров и плагинов
// - Нельзя менять на лету из-за зависимостей

const webpack = require('webpack');

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    filename: '[name].[contenthash].js',
    path: __dirname + '/dist',
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

// === Для монорепозитория ===
// Рекомендую: Turbo + Vite/esbuild
// Причины:
// - Turborepo кэширует сборки между пакетами
// - Параллельное выполнение задач
// - Incremental builds

Критерии выбора сборщика

1. Скорость разработки — Vite/Turbopack выигрывают
2. Size финального бандла — Webpack и Rollup лучше оптимизируют
3. Ecosystem — Webpack имеет больше плагинов
4. Learning curve — Next.js и Vite проще, Webpack требует кривой обучения
5. Type checking — все поддерживают, но Next.js интегрирует TypeScript лучше

В нашем проекте (PrepBro)

В нашем monorepo используем Next.js с output: 'standalone' для фронтенда, потому что:

• SSR для SEO
• Встроенная оптимизация изображений
• API routes (если нужны)
• File-based routing упрощает структуру
• Деплой на Dokku проще с standalone output

Запускаем сборку:

npm run build  # Using Next.js builder
npm run dev    # Dev server с hot reload