Настройка esbuild для веб-проекта: быстрая сборка JS/TS

Мы часто сталкиваемся с проектами, где сборка занимает минуты. esbuild написан на Go и работает в 10–100 раз быстрее аналогов на JavaScript. Холодный старт, который Webpack тратит 30 секунд, esbuild завершает за 300 мс. Это меняет не только время ожидания, но и подход к разработке: пересборка на каждом сохранении перестаёт быть проблемой. По данным официального бенчмарка из репозитория esbuild, esbuild выполняет 1000 файлов за 0.1 секунды — против 6 секунд у Webpack. Наш опыт показывает, что внедрение esbuild сокращает время сборки в среднем в 15 раз, а прирост производительности разработчиков достигает 30% за счёт мгновенной обратной связи. Мы гарантируем, что после настройки вы забудете о долгих ожиданиях билда.

Когда стоит использовать esbuild напрямую?

Большинство проектов используют esbuild косвенно — через Vite, который берёт его для dev-сервера, или через Jest с esbuild-jest. Прямое использование esbuild оправдано, когда нужен минималистичный пайплайн без фреймворкового оверхеда, собирается сервер на Node.js (Lambda-функции, CLI-утилиты), существующий билд слишком медленный и требуется точечная замена транспилятора, или проект в монорепо требует кастомного скрипта сборки. Например, для Lambda-функций, где важна скорость деплоя, esbuild идеален.

Как esbuild ускоряет сборку?

Секрет скорости — в использовании Go вместо JavaScript и параллельной обработке без полного AST. esbuild использует все ядра процессора, что даёт выигрыш в скорости. В таблице ниже — типичные показатели для среднего проекта:

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

Наши инженеры имеют 10+ лет опыта в веб-разработке и более 50 успешных проектов по оптимизации сборки. Мы сертифицированы по работе с современными инструментами и гарантируем индивидуальный подход. Каждый кейс уникален: мы анализируем текущий пайплайн, выявляем узкие места и предлагаем оптимальное решение.

Установка и первый запуск

npm install --save-dev esbuild 

Минимальный запуск без конфиг-файла:

./node_modules/.bin/esbuild src/index.ts \
  --bundle \
  --outfile=dist/bundle.js \
  --target=es2020 \
  --format=esm \
  --sourcemap

JavaScript API и конфигурация

esbuild не имеет YAML/JSON-конфига — конфигурация через JS API или CLI. JS API даёт полный контроль:

import * as esbuild from 'esbuild';
await esbuild.build({
  entryPoints: ['src/index.ts'],
  bundle: true,
  outdir: 'dist',
  format: 'esm',
  target: ['es2020', 'chrome90', 'firefox88', 'safari14'],
  splitting: true,
  sourcemap: true,
  minify: process.env.NODE_ENV === 'production',
  define: {
    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
  },
  external: ['react', 'react-dom'],
  metafile: true,
  loader: {
    '.png': 'file',
    '.svg': 'dataurl',
    '.woff2': 'file',
  },
});

Dev-сервер и плагины: пошаговая настройка

Для разработки esbuild предоставляет встроенный dev-сервер и watch-режим:

import * as esbuild from 'esbuild';
const ctx = await esbuild.context({
  entryPoints: ['src/index.tsx'],
  bundle: true,
  outdir: 'dist',
  format: 'esm',
  sourcemap: 'inline',
  define: {
    'process.env.NODE_ENV': '"development"',
  },
});
await ctx.watch();
const { host, port } = await ctx.serve({
  servedir: 'public',
  port: 3000,
});

Экосистема плагинов меньше, чем у Webpack, но ключевые задачи закрыты. В таблице — основные плагины:

Написать собственный плагин несложно — API простой и состоит из хуков onResolve и onLoad.

Сборка для Node.js и анализ бандла

Lambda-функции, CLI-инструменты, серверные скрипты — esbuild отлично подходит для платформы Node.js:

await esbuild.build({
  entryPoints: ['src/handler.ts'],
  bundle: true,
  platform: 'node',
  target: 'node18',
  format: 'cjs',
  outfile: 'dist/handler.js',
  external: ['@aws-sdk/*', 'bcrypt', 'sharp'],
  minify: true,
});

С метафайлом можно анализировать размеры модулей. Выгрузите JSON и загрузите в интерактивный анализатор esbuild — покажет sunburst-диаграмму с долями каждого файла.

Ограничения

esbuild намеренно не реализует ряд вещей: проверку типов TypeScript (запускайте tsc --noEmit отдельно в CI), полноценные CSS Modules, экспериментальный синтаксис декораторов и некоторые Babel-трансформы. Если нужны специфические AST-преобразования, потребуется плагин или предобработка через SWC/Babel.

Что входит в настройку esbuild

Мы предлагаем комплексную настройку esbuild под ваш проект. В типовой пакет входит:

• аудит текущего сборочного пайплайна и выявление узких мест
• конфигурация под ваши задачи (TypeScript, JSX, CSS, ассеты)
• интеграция с фреймворком (React, Vue, Angular) и настройка code splitting
• оптимизация: tree shaking, минификация, анализ метафайла
• документация по скриптам сборки и рекомендации по CI/CD
• обучение команды работе с esbuild

Сроки

Замена транспилятора в существующем проекте на esbuild (например, Jest → esbuild-jest) занимает от 2 до 4 часов. Настройка полноценного пайплайна с нуля (dev-сервер, production, CSS, ассеты) — от 4 до 8 часов. Стоимость рассчитывается индивидуально.

Закажите настройку esbuild прямо сейчас и получите консультацию. Наши инженеры свяжутся с вами в течение часа.