Frontend Academy · Урок

esbuild: скорость и ограничения

Используйте esbuild как самостоятельный сборщик и разберитесь, почему он на порядки быстрее webpack, а также изучите его текущие ограничения в работе с плагинами и типами

«esbuild: скорость и ограничения» — бесплатный урок Frontend Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.

Что такое esbuild?

esbuild — это сборщик и минификатор, написанный на Go. Он работает в 10–100 раз быстрее сборщиков на JavaScript благодаря нативной многопоточности и отсутствию накладных расходов на запуск. Создан Эваном Уоллесом (Figma).

Сравнение производительности

Сборка исходного кода React (около 6 MB): esbuild — примерно 0,4 с, Webpack — примерно 9 с, Rollup — примерно 6 с, Parcel — примерно 10 с. Такая скорость достигается благодаря Go (компилируемый язык), параллельному выполнению, отсутствию преобразования AST между этапами и простой архитектуре.

Прямое использование esbuild

Установите esbuild и запустите его из CLI.

npm install -D esbuild

npx esbuild src/app.ts \
  --bundle \
  --outfile=dist/app.js \
  --minify \
  --sourcemap \
  --target=es2020 \
  --platform=browser

Программный API

Используйте его в скрипте сборки, чтобы получить больше контроля.

// build.js
import { build } from 'esbuild';

await build({
  entryPoints: ['src/app.ts'],
  bundle: true,
  outfile: 'dist/app.js',
  minify: true,
  sourcemap: true,
  target: ['es2020'],
  platform: 'browser',
  define: { 'process.env.NODE_ENV': '"production"' }
});

TypeScript без tsc

esbuild удаляет синтаксис TypeScript, преобразуя .ts в .js, и делает это намного быстрее, чем tsc. Он NOT проверяет типы — для этого отдельно запустите tsc --noEmit.

# Strip types and bundle in one go:
npx esbuild src/index.ts --bundle --outfile=dist/index.js

# Type-check separately (slower, can run in parallel):
npx tsc --noEmit

Сервер разработки с горячей перезагрузкой

esbuild имеет встроенный сервер разработки с режимом наблюдения и HMR через API контекста.

import { context } from 'esbuild';

const ctx = await context({
  entryPoints: ['src/app.ts'],
  bundle: true,
  outdir: 'dist'
});

await ctx.watch();
await ctx.serve({ servedir: 'public', port: 8000 });

Архитектура плагинов

esbuild поддерживает плагины с двумя основными хуками: onResolve (перехватывает разрешение модулей) и onLoad (предоставляет содержимое разрешённых модулей).

const myPlugin = {
  name: 'env',
  setup(build) {
    build.onResolve({ filter: /^env$/ }, () => ({ path: 'env', namespace: 'env-ns' }));
    build.onLoad({ filter: /.*/, namespace: 'env-ns' }, () => ({
      contents: JSON.stringify(process.env),
      loader: 'json'
    }));
  }
};

Загрузчики

В esbuild встроены загрузчики для: js, ts, jsx, tsx, json, css, text, base64, dataurl, file, binary. Поддержка CSS ограничивается сборкой: нет модулей, нет PostCSS — используйте плагин или другой инструмент.

Ограничения по сравнению с Rollup и Vite

1) Экосистема плагинов меньше. 2) Конвейер CSS минимален: нет модулей CSS, PostCSS и встроенной поддержки препроцессоров. 3) Нет HMR для фреймворков: таким фреймворкам, как React и Vue, нужен специальный для фреймворка HMR. 4) Нет предупреждений или анализа удаления неиспользуемого кода. 5) Меньшая зрелость для сложных конфигураций SSR.

Когда esbuild особенно полезен

1) Сборка библиотек (одна точка входа, без фреймворка). 2) Упаковка Lambda и воркеров (минимальный холодный запуск). 3) Вспомогательный инструмент внутри Vite и tsup (используется для преобразования TS под капотом). 4) Переход с tsc на более быстрый конвейер TS.

esbuild внутри других инструментов

Vite использует esbuild для преобразования TS/JSX при разработке и предварительной сборки node_modules. tsup использует esbuild для сборки библиотек. У Rollup есть плагин esbuild. Многие инструменты объединяют скорость esbuild с собственным пользовательским интерфейсом.

tsup — удобная для библиотек оболочка esbuild

Для публикации библиотек npm tsup оборачивает esbuild и предоставляет разумные настройки по умолчанию: создаёт CJS + ESM + .d.ts, поддерживает наблюдение в режиме разработки и принимает простую конфигурацию.

# package.json
"scripts": { "build": "tsup src/index.ts --format esm,cjs --dts" }

Компромиссы размера сборки

esbuild быстро выполняет минификацию, но делает её немного менее агрессивно, чем Terser. Если размер важнее скорости сборки, запустите Terser отдельным завершающим этапом, чтобы получить абсолютно минимальный результат.

Быстрая проверка

esbuild может заменить tsc для компиляции TypeScript — но чего esbuild НЕ делает из того, что делает tsc?

Итоги: esbuild

Сборщик на Go, работающий в 10–100 раз быстрее сборщиков на JS. CLI и программный API. Удаляет TS без проверки типов — запускайте tsc --noEmit. Хуки плагинов: onResolve и onLoad. Ограничения: небольшая экосистема плагинов, минимальный конвейер CSS, отсутствие HMR для фреймворков. Лучше всего подходит для библиотек, Lambda и воркеров, а также для использования внутри Vite и tsup. Для библиотек npm используйте оболочку tsup.

Часто задаваемые вопросы

Урок «esbuild: скорость и ограничения» бесплатный?

Да — полный текст урока «esbuild: скорость и ограничения» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.

Чему я научусь в уроке «esbuild: скорость и ограничения»?

Используйте esbuild как самостоятельный сборщик и разберитесь, почему он на порядки быстрее webpack, а также изучите его текущие ограничения в работе с плагинами и типами Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Frontend Academy?

Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «esbuild: скорость и ограничения»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Frontend Academy?

Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

Vite: система плагинов и режим SSR
esbuild: скорость и ограничения
Рабочие пространства pnpm для монорепозиториев
Turbo: кэширование и конвейеры задач

← Назад к Frontend Academy