Frontend Academy · Lekcja

esbuild: szybkość i ograniczenia

Użyje Pan/Pani esbuild jako samodzielnego bundlera i zrozumie, dlaczego jest o rzędy wielkości szybszy od webpacka, a także pozna jego obecne ograniczenia dotyczące wtyczek i typów.

esbuild: szybkość i ograniczenia to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Czym jest esbuild?

esbuild to bundler i minifikator napisany w Go. Jest od 10 do 100 razy szybszy od bundlerów opartych na JavaScript dzięki natywnej wielowątkowości i zerowemu narzutowi uruchamiania. Został stworzony przez Evana Wallace'a (Figma).

Testy szybkości

Bundlowanie kodu źródłowego Reacta (około 6 MB): esbuild ~0,4 s, Webpack ~9 s, Rollup ~6 s, Parcel ~10 s. Na tę szybkość składają się: Go (język kompilowany), równoległość, brak konwersji AST między kolejnymi etapami oraz prosta architektura.

Bezpośrednie używanie esbuild

Zainstaluj esbuild i uruchom go z poziomu CLI.

npm install -D esbuild

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

Programistyczne API

Użyj go w skrypcie budowania, aby uzyskać większą kontrolę.

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

TypeScript bez tsc

esbuild usuwa składnię TypeScriptu (zamieniając pliki .ts na .js) znacznie szybciej niż tsc. NIE sprawdza typów — w tym celu uruchom osobno tsc --noEmit.

# 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

Serwer deweloperski z przeładowywaniem na gorąco

esbuild ma wbudowany serwer deweloperski z trybem obserwowania i HMR za pośrednictwem API context.

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

Architektura wtyczek

esbuild obsługuje wtyczki z dwoma głównymi hookami: onResolve (przejmuje rozwiązywanie modułów) oraz onLoad (dostarcza zawartość dla rozwiązanych modułów).

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

Loadery

esbuild ma wbudowane loadery dla formatów: js, ts, jsx, tsx, json, css, text, base64, dataurl, file, binary. Obsługa CSS dotyczy wyłącznie bundlowania (bez modułów i PostCSS) — użyj wtyczki lub innego narzędzia.

Ograniczenia w porównaniu z Rollup i Vite

1) Ekosystem wtyczek jest mniejszy. 2) Potok CSS jest minimalny — brak CSS Modules, PostCSS i preprocesorów w standardowej konfiguracji. 3) Brak HMR dla frameworków (frameworki takie jak React i Vue wymagają HMR specyficznego dla danego frameworka). 4) Brak ostrzeżeń i analizy tree-shakingu. 5) Mniejsza dojrzałość w przypadku złożonych konfiguracji SSR.

Kiedy esbuild sprawdza się najlepiej

1) Bundlowanie bibliotek (jeden entrypoint, bez frameworka). 2) Pakietowanie dla Lambdy i Workerów (minimalny cold start). 3) Narzędzie pomocnicze wewnątrz Vite lub tsup (używane pod spodem do transformacji TypeScriptu). 4) Migracja z tsc do szybszego potoku TypeScriptu.

esbuild wewnątrz innych narzędzi

Vite używa esbuild do transformacji TS/JSX podczas pracy deweloperskiej oraz do wstępnego bundlowania node_modules. tsup używa esbuild do bundlowania bibliotek. Rollup ma wtyczkę esbuild. Wiele narzędzi łączy szybkość esbuild z własnym UX.

tsup — przyjazny bibliotekom wrapper dla esbuild

Do publikowania bibliotek npm tsup opakowuje esbuild w rozsądne ustawienia domyślne: generuje CJS, ESM i .d.ts, obserwuje zmiany podczas pracy deweloperskiej oraz przyjmuje prostą konfigurację.

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

Kompromisy dotyczące rozmiaru bundla

esbuild szybko minifikuje kod, ale jego minifikacja jest nieco mniej agresywna niż w Terserze. Jeśli rozmiar jest ważniejszy niż szybkość budowania, uruchom Terser jako dodatkowy etap, aby uzyskać absolutnie najmniejszy wynik.

Szybki test

esbuild może zastąpić tsc podczas kompilowania TypeScriptu — ale czego esbuild NIE robi, a robi to tsc?

Podsumowanie: esbuild

Bundler oparty na Go, od 10 do 100 razy szybszy od bundlerów JS. CLI i programistyczne API. Usuwa składnię TS (bez sprawdzania typów — uruchom tsc --noEmit). Hooki wtyczek: onResolve i onLoad. Ograniczenia: niewielki ekosystem wtyczek, minimalny potok CSS, brak HMR dla frameworków. Najlepsze zastosowania: biblioteki, Lambda i Workery, użycie wewnątrz Vite lub tsup. W przypadku bibliotek npm użyj wrappera tsup.

Często zadawane pytania

Czy lekcja „esbuild: szybkość i ograniczenia” jest bezpłatna?

Tak — pełny tekst „esbuild: szybkość i ograniczenia” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „esbuild: szybkość i ograniczenia”?

Użyje Pan/Pani esbuild jako samodzielnego bundlera i zrozumie, dlaczego jest o rzędy wielkości szybszy od webpacka, a także pozna jego obecne ograniczenia dotyczące wtyczek i typów. Ćwiczysz Frontend Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Frontend Academy?

Nie wymagamy żadnego doświadczenia. Frontend Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.

Ile czasu zajmuje lekcja „esbuild: szybkość i ograniczenia”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Frontend Academy?

Tak. Każda lekcja Frontend Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Frontend Academy