esbuild: Go'da yozilgan ultratez JavaScript bundler

Zamonaviy frontend loyihalarda kodni brauzer tushunadigan holatga keltirish uchun bundler degan vosita kerak bo'ladi. Bundler o'nlab yoki yuzlab JavaScript modullarini, stillarni va boshqa resurslarni bir nechta optimallashtirilgan faylga jamlaydi, importlarni hal qiladi va kerak bo'lganda kodni qisqartiradi. Uzoq yillar davomida bu sohada Webpack hukmronlik qildi, biroq uning sekinligi katta loyihalarda dasturchilar uchun jiddiy muammoga aylandi. Aynan shu joyda esbuild paydo bo'ldi va butun ekotizimning tezlik haqidagi tasavvurini o'zgartirib yubordi.

esbuild nima va u qanday paydo bo'ldi

esbuild — bu Evan Wallace tomonidan yaratilgan, JavaScript va TypeScript kodini birlashtiruvchi va o'zgartiruvchi vosita. Eng muhim jihati shundaki, u JavaScript yoki TypeScriptda emas, balki Go dasturlash tilida yozilgan. Bu tanlov tasodifiy emas: Go mashina kodiga kompilatsiya qilinadi va ko'p yadroli protsessorlardan to'liq foydalanish uchun yengil parallellik mexanizmlariga ega. Natijada esbuild an'anaviy bundlerlardan o'n martadan yuz martagacha tezroq ishlaydi, ba'zi loyihalarda esa bu farq yanada sezilarli bo'ladi.

Nega esbuild bunchalik tez ishlaydi

Tezlikning bir nechta asosiy sababi bor. Birinchidan, Go tili mahalliy mashina kodiga aylanadi va JavaScript interpretatori ustida ishlaydigan vositalardagi qo'shimcha yuklamadan xoli bo'ladi. Ikkinchidan, esbuild ishni protsessor yadrolari o'rtasida parallel ravishda taqsimlaydi, ya'ni fayllarni tahlil qilish, transformatsiya va kod generatsiyasi bir vaqtning o'zida bir nechta oqimda bajariladi. Uchinchidan, vosita xotiradan tejamkor foydalanadi va bir marta o'qilgan ma'lumotni keraksiz nusxalashdan saqlanadi. Bularning barchasi birgalikda Webpack yoki Babel kabi vositalar minutlarda bajaradigan ishni soniyalarga qisqartiradi.

esbuild nimalarni bajaradi

esbuild faqat bundling bilan cheklanmaydi. U bir nechta vazifani yagona tezkor jarayonda birlashtiradi: modullarni bog'lash, kodni qisqartirish ya'ni minifikatsiya, TypeScript va JSX sintaksisini oddiy JavaScriptga transpilyatsiya qilish, hamda tree shaking orqali ishlatilmayotgan kodni olib tashlash. TypeScript fayllarini qayta ishlashda esbuild faqat tiplarni o'chiradi va sintaksisni o'zgartiradi, lekin tip tekshiruvini bajarmaydi. Shu sababli ko'pchilik jamoalar tip xatolarini alohida tsc vositasi orqali tekshiradi va esbuildni faqat tezkor transformatsiya uchun ishlatadi.

esbuildni CLI orqali ishlatish

esbuildni o'rnatish va ishga tushirish juda sodda. Avval uni loyihaga qo'shasiz, so'ngra buyruq qatorida kirish faylini va chiqish parametrlarini ko'rsatasiz. Quyidagi misolda ilova nuqtasi birlashtiriladi, qisqartiriladi va brauzer uchun mo'ljallangan formatda saqlanadi.

npm install --save-dev esbuild

# Bitta buyruq bilan bundling, minify va output
npx esbuild src/app.ts \
  --bundle \
  --minify \
  --sourcemap \
  --target=es2020 \
  --outfile=dist/app.js

Bu yerda bundle bayrog'i barcha importlarni bitta faylga jamlaydi, minify natijaviy hajmni kamaytiradi, sourcemap esa brauzerda asl manba kodini ko'rish imkonini beradi. Target parametri qaysi JavaScript versiyasiga moslashtirishni belgilaydi.

JavaScript API orqali ishlatish

Murakkabroq stsenariylar va avtomatlashtirilgan qurish jarayonlari uchun esbuild dasturiy interfeysni taklif qiladi. API yordamida siz qurish jarayonini to'liq nazorat qilasiz, watch rejimida o'zgarishlarni kuzatasiz yoki natijani xotirada hosil qilasiz.

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('Qurish yakunlandi')

API versiyasi CLI bilan bir xil imkoniyatlarni beradi, lekin uni Node.js skriptlari ichida moslashtirib ishlatish mumkin. Loader parametri qaysi fayl turlari qanday qayta ishlanishini belgilaydi.

Vite va boshqa vositalar esbuildni qanday ishlatadi

Esbuildning eng katta ta'siri uning boshqa mashhur vositalar ichida ishlashida ko'rinadi. Vite ishlab chiqish rejimida bog'liqliklarni oldindan tayyorlash va TypeScriptni transpilyatsiya qilish uchun aynan esbuilddan foydalanadi, bu esa Vite serverining deyarli oniy ishga tushishini ta'minlaydi. Shunga o'xshash tarzda ko'plab boshqa zamonaviy asboblar esbuildni ichki dvigatel sifatida ishlatadi. Bu shuni anglatadiki, agar siz Vite bilan ishlasangiz, allaqachon esbuild kuchidan bilvosita foydalanayotgan bo'lasiz.

Esbuildning cheklovlari

Tezlik o'z narxiga ega va esbuildning ham cheklovlari bor. Birinchidan, uning plagin ekotizimi Webpacknikiga nisbatan ancha kichik va kamroq imkoniyatga ega, shuning uchun ba'zi murakkab transformatsiyalar uchun tayyor yechim topilmasligi mumkin. Ikkinchidan, esbuild TypeScript tip tekshiruvini bajarmaydi, demak siz tip xavfsizligini alohida ta'minlashingiz kerak. Shuningdek, ayrim ilg'or optimizatsiya funksiyalari, masalan murakkab kod bo'linishi stsenariylari, hali boshqa yetuk vositalar darajasida emas. Shu sababli juda katta va o'ziga xos talablari bor loyihalarda esbuild yagona yechim bo'la olmasligi mumkin.

Qachon esbuildni to'g'ridan-to'g'ri ishlatish kerak

esbuildni bevosita ishlatish quyidagi holatlarda mantiqiy: agar sizga juda tez qurish jarayoni kerak bo'lsa, kutubxona yoki kichik vosita yaratayotgan bo'lsangiz, yoki murakkab konfiguratsiyaga ehtiyoj sezmasangiz. Ko'pgina ilovalar uchun esa Vite kabi yuqori darajadagi vositadan foydalanish qulayroq, chunki ular esbuildni ichida ishlatadi va qo'shimcha qulayliklarni taqdim etadi. Sayt.uz jamoasi sifatida biz mijozlarimizga loyiha hajmi va talablariga qarab to'g'ri vositani tanlashni tavsiya qilamiz, chunki to'g'ri tanlov ishlab chiqish tezligini sezilarli oshiradi.