esbuild: ультрабыстрый бандлер JavaScript, написанный на Go

В современных фронтенд-проектах для того, чтобы код стал понятным браузеру и работал эффективно, требуется специальный инструмент — бандлер. Бандлер объединяет десятки или сотни модулей JavaScript, стилей и других ресурсов в несколько оптимизированных файлов, разрешает импорты и при необходимости сжимает код. Долгие годы в этой области господствовал Webpack, однако его медлительность на крупных проектах превратилась в серьёзную проблему для разработчиков. Именно в этот момент появился esbuild и полностью изменил представление всей экосистемы о том, насколько быстрой может быть сборка.

Что такое esbuild и как он появился

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

Почему esbuild работает настолько быстро

У такой скорости есть несколько фундаментальных причин. Во-первых, язык Go превращается в нативный машинный код и не несёт накладных расходов инструментов, работающих поверх интерпретатора JavaScript. Во-вторых, esbuild распределяет работу между ядрами процессора параллельно: разбор файлов, их трансформация и генерация итогового кода выполняются одновременно в нескольких потоках. В-третьих, инструмент бережно расходует оперативную память и избегает лишнего копирования уже прочитанных данных. Всё это вместе сокращает до секунд ту работу, которую инструменты вроде Webpack или Babel выполняют за минуты.

Что умеет делать esbuild

esbuild не ограничивается одной лишь сборкой модулей. Он объединяет несколько задач в едином быстром процессе: связывание модулей, сжатие кода или минификацию, транспиляцию синтаксиса TypeScript и JSX в обычный JavaScript, а также удаление неиспользуемого кода через механизм tree shaking. При обработке файлов TypeScript esbuild лишь удаляет типы и преобразует синтаксис, но не выполняет проверку типов. По этой причине большинство команд проверяют ошибки типов отдельным инструментом tsc, а esbuild используют исключительно для быстрого преобразования кода.

Использование esbuild через командную строку

Установить и запустить esbuild очень просто. Сначала вы добавляете его в проект, а затем в командной строке указываете входной файл и параметры вывода. В приведённом ниже примере точка входа приложения объединяется, сжимается и сохраняется в формате, предназначенном для браузера.

npm install --save-dev esbuild

# Сборка, минификация и вывод одной командой
npx esbuild src/app.ts \
  --bundle \
  --minify \
  --sourcemap \
  --target=es2020 \
  --outfile=dist/app.js

Здесь флаг bundle собирает все импорты в один файл, minify уменьшает итоговый размер, а sourcemap позволяет видеть в браузере исходный код. Параметр target определяет, под какую версию JavaScript адаптировать результат.

Использование через JavaScript API

Для более сложных сценариев и автоматизированных процессов сборки esbuild предлагает программный интерфейс. С помощью API вы полностью контролируете процесс сборки, отслеживаете изменения в режиме наблюдения или формируете результат прямо в памяти.

import * as esbuild from 'esbuild'

await esbuild.build({
  entryPoints: ['src/app.ts'],
  bundle: true,
  minify: true,
  sourcemap: true,
  target: ['es2020'],
  outfile: 'dist/app.js',
  loader: { '.png': 'dataurl' },
})

console.log('Сборка завершена')

Версия с API предоставляет те же возможности, что и командная строка, но её можно гибко встраивать внутрь скриптов на Node.js. Параметр loader задаёт, как именно обрабатывать те или иные типы файлов.

Как Vite и другие инструменты используют esbuild

Наибольшее влияние esbuild проявляется в том, как он работает внутри других популярных инструментов. Vite в режиме разработки использует именно esbuild для предварительной подготовки зависимостей и транспиляции TypeScript, что обеспечивает практически мгновенный запуск сервера. Аналогичным образом многие другие современные инструменты применяют esbuild в качестве внутреннего движка. Это означает, что если вы работаете с Vite, то уже косвенно используете мощь esbuild, даже не настраивая его напрямую.

Ограничения esbuild

Скорость имеет свою цену, и у esbuild тоже есть ограничения. Во-первых, его экосистема плагинов заметно меньше и беднее по возможностям, чем у Webpack, поэтому для некоторых сложных преобразований может не найтись готового решения. Во-вторых, esbuild не выполняет проверку типов TypeScript, а значит вы должны обеспечивать типобезопасность отдельно. Кроме того, некоторые продвинутые функции оптимизации, например сложные сценарии разделения кода, пока не достигают уровня более зрелых инструментов. По этой причине в очень крупных проектах со специфическими требованиями esbuild не всегда может быть единственным решением.

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

Прямое использование esbuild оправдано в следующих случаях: если вам нужна предельно быстрая сборка, если вы создаёте библиотеку или небольшой инструмент, либо если вам не требуется сложная конфигурация. Для большинства же приложений удобнее применять высокоуровневый инструмент вроде Vite, поскольку он использует esbuild внутри и предоставляет дополнительные удобства. Как команда Sayt.uz, мы рекомендуем нашим клиентам выбирать подходящий инструмент в зависимости от масштаба и требований проекта, ведь правильный выбор заметно повышает скорость разработки.