Настройка 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 прямо сейчас и получите консультацию бесплатно. Наши инженеры свяжутся с вами в течение часа.