esbuild: Go тилида ёзилган ультратез JavaScript бандлер

Замонавий фронтенд лойиҳаларда кодни браузер тушунадиган ҳолатга келтириш ва уни самарали ишлатиш учун бандлер деган махсус восита керак бўлади. Бандлер ўнлаб ёки юзлаб 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ни CLI орқали ишлатиш

esbuildни ўрнатиш ва ишга тушириш жуда содда. Аввал уни лойиҳага қўшасиз, сўнгра буйруқ қаторида кириш файлини ва чиқиш параметрларини кўрсатасиз. Қуйидаги мисолда илова нуқтаси бирлаштирилади, қисқартирилади ва браузер учун мўлжалланган форматда сақланади.

npm install --save-dev esbuild

# Битта буйруқ билан bundling, minify ва output
npx esbuild src/app.ts \
  --bundle \
  --minify \
  --sourcemap \
  --target=es2020 \
  --outfile=dist/app.js

Бу ерда bundle байроғи барча импортларни битта файлга жамлайди, minify натижавий ҳажмни камайтиради, sourcemap эса браузерда асл манба кодини кўриш имконини беради. Target параметри қайси JavaScript версиясига мослаштиришни белгилайди.

JavaScript API орқали ишлатиш

Мураккаброқ сценарийлар ва автоматлаштирилган қуриш жараёнлари учун esbuild дастурий интерфейсни таклиф қилади. API ёрдамида сиз қуриш жараёнини тўлиқ назорат қиласиз, watch режимида ўзгаришларни кузатасиз ёки натижани хотирада ҳосил қиласиз.

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 версияси CLI билан бир хил имкониятларни беради, лекин уни Node.js скриптлари ичида мослаштириб ишлатиш мумкин. Loader параметри қайси файл турлари қандай қайта ишланишини белгилайди.

Vite ва бошқа воситалар esbuildни қандай ишлатади

Esbuildнинг энг катта таъсири унинг бошқа машҳур воситалар ичида ишлашида кўринади. Vite ишлаб чиқиш режимида боғлиқликларни олдиндан тайёрлаш ва TypeScriptни транспиляция қилиш учун айнан esbuilddan фойдаланади, бу эса Vite серверининг деярли оний ишга тушишини таъминлайди. Шунга ўхшаш тарзда кўплаб бошқа замонавий асбоблар esbuildни ички двигатель сифатида ишлатади. Бу шуни англатадики, агар сиз Vite билан ишласангиз, аллақачон esbuild кучидан билвосита фойдаланаётган бўласиз.

Esbuildнинг чекловлари

Тезлик ўз нархига эга ва esbuildнинг ҳам чекловлари бор. Биринчидан, унинг плагин экотизими Webpackникига нисбатан анча кичик ва камроқ имкониятга эга, шунинг учун баъзи мураккаб трансформациялар учун тайёр ечим топилмаслиги мумкин. Иккинчидан, esbuild TypeScript тип текширувини бажармайди, демак сиз тип хавфсизлигини алоҳида таъминлашингиз керак. Шунингдек, айрим илғор оптимизация функциялари, масалан мураккаб код бўлиниши сценарийлари, ҳали бошқа етук воситалар даражасида эмас. Шу сабабли жуда катта ва ўзига хос талаблари бор лойиҳаларда esbuild ягона ечим бўла олмаслиги мумкин.

Қачон esbuildни тўғридан-тўғри ишлатиш керак

esbuildни бевосита ишлатиш қуйидаги ҳолатларда мантиқий: агар сизга жуда тез қуриш жараёни керак бўлса, кутубхона ёки кичик восита яратаётган бўлсангиз, ёки мураккаб конфигурацияга эҳтиёж сезмасангиз. Кўпгина иловалар учун эса Vite каби юқори даражадаги воситадан фойдаланиш қулайроқ, чунки улар esbuildни ичида ишлатади ва қўшимча қулайликларни тақдим этади. Sayt.uz жамоаси сифатида биз мижозларимизга лойиҳа ҳажми ва талабларига қараб тўғри воситани танлашни тавсия қиламиз, чунки тўғри танлов ишлаб чиқиш тезлигини сезиларли оширади.