Что используешь для сборки проекта?

Мой подход к выбору инструментов сборки

За последние 10+ лет я прошел эволюцию от простых сборщиков вроде Grunt и Gulp к современным инструментам, и сегодня мой выбор зависит от конкретных требований проекта, команды и экосистемы.

Основные инструменты в 2024 году

Vite — основной выбор для большинства проектов

Сейчас Vite стал моим основным инструментом благодаря его скорости, простоте конфигурации и отличной интеграции с современным фронтенд-стеком:

// vite.config.js — минимальная конфигурация
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  build: {
    outDir: 'dist',
    sourcemap: true,
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],
          ui: ['antd', 'lodash-es']
        }
      }
    }
  }
})

Преимущества Vite:

• Мгновенный запуск dev-сервера через ES-модули
• Горячая перезагрузка модулей (HMR) без перезагрузки страницы
• Оптимизированная сборка через Rollup
• Поддержка TypeScript, JSX, CSS-модулей из коробки
• Плагинная система для расширения функциональности

Webpack — для legacy-проектов и специфических нужд

Для поддержки старых проектов или сложных конфигураций использую Webpack:

// webpack.config.js
const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

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

Ключевые аспекты моей настройки сборки

Оптимизация производительности

• Code splitting: автоматическое разделение кода на чанки
• Tree shaking: удаление неиспользуемого кода
• Caching: настройка хеширования файлов для кэширования в браузере
• Compression: сжатие ресурсов через gzip/brotli

Обработка ресурсов

• CSS: PostCSS с autoprefixer, CSS-модули для изоляции стилей
• Изображения: автоматическая оптимизация и преобразование в webp
• Шрифты: inline для критических, lazy loading для остальных

Инструменты разработки

• TypeScript: строгая типизация для больших проектов
• ESLint/Prettier: единый стиль кода
• Husky/lint-staged: прекоммитные проверки
• Bundle analyzer: анализ размера бандла

Пример современного стека для React-проекта

{
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "lint": "eslint src --ext ts,tsx",
    "format": "prettier --write src/**/*.{ts,tsx,js,css}",
    "analyze": "ANALYZE=true vite build"
  },
  "devDependencies": {
    "@vitejs/plugin-react": "^4.0.0",
    "typescript": "^5.0.0",
    "vite": "^5.0.0",
    "eslint": "^8.0.0",
    "postcss": "^8.0.0",
    "autoprefixer": "^10.0.0"
  }
}

Критерии выбора инструмента

Для выбора между Vite и Webpack я оцениваю:

1. Размер и сложность проекта: Vite для средних/малых, Webpack для монолитов
2. Требования к браузерной поддержке: Webpack лучше для legacy-браузеров
3. Интеграция с фреймворком: Vite идеален для React/Vue/Svelte
4. Специфичные нужды: кастомные плагины, нестандартные форматы файлов

Дополнительные инструменты в комплекте:

• Babel только для поддержки старых браузеров
• SWC для ускорения трансформаций в больших проектах
• Turbopack (экспериментально) для максимальной скорости

DevOps-интеграция

Сборка всегда интегрируется в CI/CD пайплайн:

• Docker-образы с многостадийной сборкой
• Кэширование зависимостей в CI (pnpm store, npm cache)
• Артефакты сборки с версионированием
• Health checks для собранного приложения

Заключение

Мой подход — использовать самый простой инструмент, который решает задачу. Для 90% современных проектов это Vite с минимальной конфигурацией. Я слежу за трендами (например, за развитием Turbopack и Rspack), но внедряю новые технологии только после оценки стабильности и экосистемы. Ключевой принцип: сборка должна быть быстрой для разработчиков и эффективной для пользователей, с балансом между скоростью разработки и оптимизацией production-бандла.