Frontend Academy · leksjon

esbuild: hastighet og begrensninger

Bruk esbuild som en frittstående bundler, og forstå hvorfor den er mange størrelsesordener raskere enn webpack, samt begrensningene innen plugins og typer.

Leksjon 2 av 415 trinn

esbuild: hastighet og begrensninger er en gratis leksjon i Frontend Academy på CoddyKit. Dette er leksjon 2 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Frontend Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Frontend Academy inneholder totalt 4 leksjoner.

Hva er esbuild?

esbuild er en bundler og minifier skrevet i Go. Den er 10–100 ganger raskere enn JavaScript-baserte bundlere takket være innebygd flertråding og ingen oppstartskostnad. Opprettet av Evan Wallace (Figma).

Ytelsesmålinger

Bunting av React-kildekoden (omtrent 6 MB): esbuild ~0,4 sekunder, Webpack ~9 sekunder, Rollup ~6 sekunder, Parcel ~10 sekunder. Hastigheten kommer fra: Go (kompilert), parallellitet, ingen AST-konvertering mellom trinnene og en enkel arkitektur.

Bruke esbuild direkte

Installer og kjør fra CLI-et.

npm install -D esbuild

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

Programmatisk API

Bruk det fra et byggeskript for mer kontroll.

// 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 uten tsc

esbuild fjerner TypeScript-syntaks (gjør .ts om til .js) langt raskere enn tsc. Det utfører IKKE typesjekking – kjør tsc --noEmit separat for dette.

# 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

Utviklingsserver med hot reload

esbuild har en innebygd utviklingsserver med overvåkingsmodus og HMR via context-API-et.

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

Pluginarkitektur

esbuild støtter plugins med to hovedhooks: onResolve (avskjære modulløsning) og onLoad (levere innhold for løste moduler).

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

Loadere

esbuild har innebygde loadere for: js, ts, jsx, tsx, json, css, text, base64, dataurl, file, binary. CSS-støtten gjelder bare bundling (ingen moduler, ingen PostCSS) – bruk en plugin eller et annet verktøy.

Begrensninger sammenlignet med Rollup/Vite

1) Pluginøkosystemet er mindre. 2) CSS-pipelinen er minimal – ingen CSS Modules, ingen PostCSS og ingen preprocessorer som standard. 3) Ingen HMR for rammeverk (rammeverk som React/Vue trenger rammeverksspesifikk HMR). 4) Ingen advarsler eller analyse av tree-shaking. 5) Mindre modent for komplekse SSR-oppsett.

Når esbuild er på sitt beste

1) Bunting av biblioteker (ett inngangspunkt, uten rammeverk). 2) Pakking for Lambda/Worker (minimal kald oppstart). 3) Som underverktøy i Vite/tsup (brukes til TypeScript-transformasjon i bakgrunnen). 4) Migrering fra tsc til en raskere TypeScript-pipeline.

esbuild i andre verktøy

Vite bruker esbuild til transformasjon av TS/JSX under utvikling og forhåndsbunting av node_modules. tsup bruker esbuild til bunting av biblioteker. Rollup har en esbuild-plugin. Mange verktøy kombinerer hastigheten til esbuild med sitt eget brukergrensesnitt.

tsup – esbuild-wrapper for biblioteker

For publisering av npm-biblioteker pakker tsup inn esbuild med fornuftige standardinnstillinger: genererer CJS + ESM + .d.ts, overvåker endringer under utvikling og godtar enkel konfigurasjon.

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

Avveininger for buntstørrelse

esbuild minifiserer raskt, men minifiseringen er litt mindre aggressiv enn Terser. Kjør Terser som et etterfølgende trinn for minst mulig output hvis størrelse er viktigere enn byggehastighet.

Rask sjekk

esbuild kan erstatte tsc for kompilering av TypeScript – men hva gjør esbuild IKKE som tsc gjør?

Besvar den i den interaktive leksjonen

Oppsummering: esbuild

Go-basert bundler, 10–100 ganger raskere enn JS-bundlere. CLI + programmatisk API. Fjerner TS (ingen typesjekking – kjør tsc --noEmit). Plugin-hooks: onResolve + onLoad. Begrensninger: tynt pluginøkosystem, minimal CSS-pipeline og ingen HMR for rammeverk. Best for: biblioteker, Lambda/Workers og bruk i Vite/tsup. Bruk tsup-wrapperen for npm-biblioteker.

Gratis å komme i gang

Lær deg HTML med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 41
Leksjoner: 163

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «esbuild: hastighet og begrensninger» gratis?

Ja – hele teksten i «esbuild: hastighet og begrensninger» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Frontend Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Frontend Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «esbuild: hastighet og begrensninger»?

Bruk esbuild som en frittstående bundler, og forstå hvorfor den er mange størrelsesordener raskere enn webpack, samt begrensningene innen plugins og typer. Du øver på Frontend Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Frontend Academy?

Ingen tidligere erfaring er nødvendig. Frontend Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.

Hvor lang tid tar leksjonen «esbuild: hastighet og begrensninger»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Frontend Academy-leksjonen?

Ja. Alle Frontend Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til Frontend Academy