Frontend Academy · Lezione

esbuild: velocità e limitazioni

Usare esbuild come bundler indipendente e capire perché è molto più veloce di webpack, oltre a conoscerne le attuali limitazioni relative a plugin e tipi

esbuild: velocità e limitazioni è una lezione Frontend Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Frontend Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Frontend Academy include 4 lezioni in totale.

Che cos'è esbuild?

esbuild è un bundler e minifier scritto in Go. È da 10 a 100 volte più veloce dei bundler basati su JavaScript grazie al multithreading nativo e all'assenza di overhead di avvio. Creato da Evan Wallace (Figma).

Benchmark delle prestazioni

Bundling del codice sorgente di React (circa 6 MB): esbuild ~0,4 s, Webpack ~9 s, Rollup ~6 s, Parcel ~10 s. La velocità dipende da: Go (compilato), parallelismo, nessuna conversione dell'AST tra i passaggi, architettura semplice.

Utilizzo diretto di esbuild

Installi ed esegua dalla CLI.

npm install -D esbuild

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

API programmatica

La utilizzi da uno script di build per avere un controllo maggiore.

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

esbuild rimuove la sintassi TypeScript (convertendo .ts in .js) molto più velocemente di tsc. NON esegue il controllo dei tipi: esegua tsc --noEmit separatamente per questo.

# 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

Server di sviluppo con hot reload

esbuild include un server di sviluppo integrato con modalità watch e HMR tramite la context API.

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

Architettura dei plugin

esbuild supporta i plugin con due hook principali: onResolve (intercetta la risoluzione dei moduli) e onLoad (fornisce il contenuto dei moduli risolti).

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

Loader

esbuild include loader integrati per: js, ts, jsx, tsx, json, css, text, base64, dataurl, file, binary. Il supporto CSS si limita al bundling (niente moduli, niente PostCSS): utilizzi un plugin o un altro strumento.

Limitazioni rispetto a Rollup/Vite

1) L'ecosistema dei plugin è più ridotto. 2) La pipeline CSS è minimale: niente CSS Modules, PostCSS o preprocessori pronti all'uso. 3) Nessun HMR per i framework (framework come React/Vue richiedono un HMR specifico). 4) Nessun avviso o strumento di analisi del tree-shaking. 5) Minore maturità per configurazioni SSR complesse.

Quando esbuild dà il meglio di sé

1) Bundling di librerie (un solo entrypoint, senza framework). 2) Packaging di Lambda/Worker (cold start minimo). 3) Sotto-strumento all'interno di Vite/tsup (utilizzato internamente per la trasformazione di TS). 4) Migrazione da tsc a una pipeline TS più veloce.

esbuild negli altri strumenti

Vite usa esbuild per la trasformazione di TS/JSX durante lo sviluppo e per il pre-bundling di node_modules. tsup usa esbuild per il bundling delle librerie. Rollup dispone di un plugin esbuild. Molti strumenti combinano la velocità di esbuild con la propria esperienza utente.

tsup — wrapper di esbuild per le librerie

Per pubblicare librerie npm, tsup avvolge esbuild con impostazioni predefinite ragionevoli: genera CJS + ESM + .d.ts, osserva le modifiche durante lo sviluppo e accetta una configurazione semplice.

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

Compromessi sulle dimensioni del bundle

esbuild esegue la minificazione rapidamente, ma la sua minificazione è leggermente meno aggressiva di quella di Terser. Esegua Terser come passaggio successivo per ottenere un output il più piccolo possibile, se le dimensioni contano più della velocità di build.

Verifica rapida

esbuild può sostituire tsc per compilare TypeScript, ma che cosa NON esegue che invece tsc esegue?

Riepilogo: esbuild

Bundler basato su Go, da 10 a 100 volte più veloce dei bundler JS. CLI + API programmatica. Rimuove la sintassi TS (nessun controllo dei tipi: esegua tsc --noEmit). Hook dei plugin: onResolve + onLoad. Limitazioni: ecosistema dei plugin ridotto, pipeline CSS minimale, nessun HMR per i framework. Ideale per: librerie, Lambda/Worker, utilizzo all'interno di Vite/tsup. Utilizzi il wrapper tsup per le librerie npm.

Domande Frequenti

La lezione «esbuild: velocità e limitazioni» è gratuita?

Sì — il testo completo di «esbuild: velocità e limitazioni» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Frontend Academy, passa a CoddyKit PRO. Il corso Frontend Academy include 4 lezioni in totale.

Cosa imparerò in «esbuild: velocità e limitazioni»?

Usare esbuild come bundler indipendente e capire perché è molto più veloce di webpack, oltre a conoscerne le attuali limitazioni relative a plugin e tipi Eserciti Frontend Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Frontend Academy?

Non è richiesta alcuna esperienza precedente. Frontend Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.

Quanto tempo richiede la lezione «esbuild: velocità e limitazioni»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Frontend Academy?

Sì. Ogni lezione Frontend Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Frontend Academy