Стоит ли использовать esbuild для сборки фронта сегодня?

Question

[Михаил Р.]

Приветствую!

Последнее время поглядываю на esbuild сидя на webpack. Очень интригует фраза Our current build tools for the web are 10-100x slower than they could be, понятно, что результат можно как угодно подкрутить, но разница при этом все равно интригующая.

При этом, насколько я понял, модули можно писать и на JS и на Go.

Вопросы:
1. Стоит ли использовать esbuild для сборки фронта сегодня (подводные камни?)?
2. Пробовали и/или используете ли Вы esbuild для сборки сегодня (Ваш опыт как JS/Go разраба?)?

Comments

[WapSter]

Сразу говорю, что не копал сам сборщик, но ещё год назад vite для сборки библиотек хотели задействовать данный инструмент. Но видимо что-то не срослось, под капотом до сих пор rollup

[Lynn «Кофеман»]

Попробовать стоит, но если у вас развесистый конфиг вебпака, то скорее всего ничего с ходу не заведётся.

Я собираю (как это ни странно) консольные серверные инструменты. Но тут мне проще, они изначально чистый TS/JS без исторических наслоений вебпака.

И да, на них тоже виден прирост в скорости запуска, потому что ноде не приходится читать два миллиона файлов по всем уголкам диска (всего лишь один миллион :)

[Михаил Р.]

WapSter,

Но видимо что-то не срослось

Вот тут интересны подробности, т.к. возможно "что-то" до сих пор актуально...

[WapSter]

Михаил Р.,

Why Not Bundle with esbuild?#
While esbuild is blazing fast and is already a very capable bundler for libraries, some of the important features needed for bundling applications are still work in progress - in particular code-splitting and CSS handling. For the time being, Rollup is more mature and flexible in these regards. That said, we won't rule out the possibility of using esbuild for production build when it stabilizes these features in the future.

Но при этом на сайте esbuild

Note that esbuild doesn't yet support CSS modules, so the set of export names from a CSS file is currently always empty. Supporting a basic form of CSS modules is on the roadmap.

Для себя пока сделал вывод такой, для простых сборок можно использовать как замену gulp, но для vue/react пока не подходит

[Lynn «Кофеман»]

WapSter, срослось :)

https://twitter.com/vite_js/status/149140750433687...

[WapSter]

Lynn «Кофеман», спасибо) Будем пробовать)

[Roman K]

WapSter,

Для себя пока сделал вывод такой, для простых сборок можно использовать как замену gulp, но для vue/react пока не подходит

Прошу прощения, но gulp — это таск раннер, а esbuild — это компилятор (транспилятор) и бандлер. Это ортогональные вещи, которые нельзя друг другом "заменить". У нас как раз gulp, который, среди прочего, запускает esbuild

Answer 1

[Roman K]

Я пару недель назад перевёл сборку фронта с rollup на esbuild. Время сборки упало с 13с до 200мс (x65 ускорение). У коллег на M1 это время стало вообще 40мс

Из минусов заметил только отсутствие таргета ES5 (ну как заметил, об этом в доках пишут везде). Кстати, перевод таргета на ES6 уменьшил размер бандла незначительно (в основном за счёт сокращения function() в ()=>)

Больше проблем нет

Comments

[Михаил Р.]

Время сборки упало с 13с до 200мс (x65 ускорение)

У коллег на M1 это время стало вообще 40мс

Возмутительно... значит надо брать :)

Больше проблем нет

Вот прям вообще проблем не заметили?

[Roman K]

Михаил Р., вообще не заметил:) но у нас почти весь код написан на чистом js и ts, есть чуть-чуть реакта. Никаких ангуляров, вью и прочего. И даже вебпака нет.

Answer 2

[Антон Швец]

Последнее время поглядываю на esbuild сидя на webpack.

Ну так можно с вебпака никуда не слезать, а для начала собирать js с помощью esbuild-loader вместо бабеля и ts.

Answer 3

[nazarpunk]

esbuild заменяет const на var, что в один прекрасный момент выстрелило.

Comments

[Lynn «Кофеман»]

А можно подробности?
Или тикет в GH?

[nazarpunk]

При использовании https://github.com/microsoft/vscode-webview-ui-too... в расширении vscode

есть такой код

if ($global.FAST === void 0) {
  Reflect.defineProperty($global, "FAST", Object.assign({
    value: Object.create(null)
  }, propConfig));
}

const FAST = $global.FAST;

if (FAST.getById === void 0) {

При замене const на var Reflect.defineProperty не может зарегестрировать свойство FAST ибо var срабатывает раньше и соостветственно проверка if (FAST.getById отваливается, ибо FAST = undefined.

Так что был потерян целый день на переход на webpack, который не страдает заменой const и нормально инлайнит enum.