Frontend Academy · Ders

esbuild: Hız ve Sınırlamalar

esbuild'i bağımsız bir paketleyici olarak kullanmayı, webpack'ten neden kat kat hızlı olduğunu ve eklentiler ile türler konusundaki güncel sınırlamalarını anlamayı öğrenin.

2. ders / 415 adım

esbuild: Hız ve Sınırlamalar, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.

esbuild Nedir?

esbuild, Go ile yazılmış bir paketleyici ve küçültücüdür. Yerel çok iş parçacıklılığı ve sıfır başlangıç ek yükü sayesinde JavaScript tabanlı paketleyicilerden 10-100 kat daha hızlıdır. Evan Wallace (Figma) tarafından oluşturulmuştur.

Hız Karşılaştırmaları

React'in kaynak kodunu paketleme (yaklaşık 6 MB): esbuild yaklaşık 0,4 sn, Webpack yaklaşık 9 sn, Rollup yaklaşık 6 sn, Parcel yaklaşık 10 sn. Bu hızın kaynakları şunlardır: Go (derlenmiş), paralellik, geçişler arasında AST dönüşümü yapılmaması ve basit mimari.

esbuild'i Doğrudan Kullanma

CLI üzerinden kurup çalıştırın.

npm install -D esbuild

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

Programatik API

Daha fazla denetim için bir derleme betiğinden kullanın.

// 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"' }
});

tsc Olmadan TypeScript

esbuild, TypeScript söz dizimini ayıklar (.ts'yi .js'ye dönüştürür) ve bunu tsc'den çok daha hızlı yapar. Tür denetimi yapmaz — bunun için ayrıca tsc --noEmit çalıştırın.

# 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

Anında Yenilemeli Geliştirme Sunucusu

esbuild, context API aracılığıyla izleme modunu ve HMR'yi destekleyen yerleşik bir geliştirme sunucusuna sahiptir.

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 });

Eklenti Mimarisi

esbuild, iki temel kancayla eklentileri destekler: onResolve (modül çözümlemesine müdahale eder) ve onLoad (çözümlenen modüller için içerik sağlar).

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'
    }));
  }
};

Yükleyiciler

esbuild şu yerleşik yükleyicilere sahiptir: js, ts, jsx, tsx, json, css, text, base64, dataurl, file, binary. CSS desteği yalnızca paketlemeyle sınırlıdır (modüller ve PostCSS yoktur) — bir eklenti veya başka bir araç kullanın.

Rollup/Vite'a Göre Sınırlamalar

1) Eklenti ekosistemi daha küçüktür. 2) CSS işlem hattı sınırlıdır — CSS Modülleri, PostCSS ve hazır gelen ön işlemciler yoktur. 3) Çerçeveler için HMR yoktur (React/Vue gibi çerçeveler çerçeveye özgü HMR gerektirir). 4) Ağaç sallama uyarıları veya analizi yoktur. 5) Karmaşık SSR kurulumları için daha az olgundur.

esbuild'in Öne Çıktığı Durumlar

1) Kütüphane paketleme (tek giriş noktası, çerçeve yok). 2) Lambda/Worker paketleme (en düşük soğuk başlatma süresi). 3) Vite/tsup içinde alt araç olarak kullanım (TS dönüşümü arka planda bununla yapılır). 4) tsc'den daha hızlı bir TS işlem hattına geçiş.

Diğer Araçlarda esbuild

Vite, geliştirme sırasında TS/JSX dönüşümü ve node_modules'in ön paketlenmesi için esbuild kullanır. tsup, kütüphane paketleme için esbuild kullanır. Rollup'un bir esbuild eklentisi vardır. Birçok araç, esbuild'in hızını kendi kullanıcı deneyimiyle birleştirir.

tsup — Kütüphaneler için Uygun esbuild Sarmalayıcısı

npm kütüphaneleri yayımlamak için tsup, esbuild'i makul varsayılanlarla sarmalar: CJS + ESM + .d.ts üretir, geliştirme sırasında izler ve basit bir yapılandırmayı kabul eder.

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

Paket Boyutu Ödünleri

esbuild hızlı küçültme yapar, ancak küçültmesi Terser'ınkinden biraz daha az agresiftir. Boyut derleme hızından daha önemliyse, mutlak en küçük çıktıyı elde etmek için son adım olarak Terser'ı çalıştırın.

Hızlı Kontrol

esbuild, TypeScript'i derlemek için tsc'nin yerini alabilir — ancak esbuild, tsc'nin yaptığı hangi işlemi yapmaz?

İnteraktif derste cevapla

Özet: esbuild

Go tabanlı paketleyici; JS paketleyicilerinden 10-100 kat daha hızlıdır. CLI ve programatik API sunar. TS söz dizimini ayıklar (tür denetimi yapmaz — tsc --noEmit çalıştırın). Eklenti kancaları: onResolve ve onLoad. Sınırlamalar: zayıf eklenti ekosistemi, sınırlı CSS işlem hattı ve çerçeve HMR'sinin olmaması. En uygun kullanım alanları: kütüphaneler, Lambda/Workers ve Vite/tsup içi kullanım. npm kütüphaneleri için tsup sarmalayıcısını kullanın.

Başlamak ücretsiz

Yapay zeka eğitmeniyle HTML öğren — ücretsiz

Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.

Kurslar: 41
Dersler: 163

Ücretsiz öğrenmeye başla Tüm kursu görüntüle

Sıkça Sorulan Sorular

“esbuild: Hız ve Sınırlamalar” dersi ücretsiz mi?

Evet — “esbuild: Hız ve Sınırlamalar” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.

“esbuild: Hız ve Sınırlamalar” dersinde ne öğreneceğim?

esbuild'i bağımsız bir paketleyici olarak kullanmayı, webpack'ten neden kat kat hızlı olduğunu ve eklentiler ile türler konusundaki güncel sınırlamalarını anlamayı öğrenin. Frontend Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Frontend Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.

“esbuild: Hız ve Sınırlamalar” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Frontend Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Frontend Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

Vite: Eklenti Sistemi ve SSR Modu
esbuild: Hız ve Sınırlamalar
Monorepo'lar için pnpm Workspaces
Turbo: Önbelleğe Alma ve Görev İşlem Hatları

← Frontend Academy Sayfasına Dön