Frontend Academy · Leçon

esbuild : rapidité et limites

Utilisez esbuild comme bundler autonome et comprenez pourquoi il est beaucoup plus rapide que webpack, ainsi que ses limites actuelles concernant les plugins et les types.

Leçon 2 sur 415 étapes

esbuild : rapidité et limites est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.

Qu'est-ce qu'esbuild ?

esbuild est un outil de regroupement et de minification écrit en Go. Il est 10 à 100 fois plus rapide que les outils de regroupement basés sur JavaScript grâce au multithreading natif et à l'absence de surcharge au démarrage. Créé par Evan Wallace (Figma).

Comparaison des performances

Regroupement du code source de React (environ 6 Mo) : esbuild ~0,4 s, Webpack ~9 s, Rollup ~6 s, Parcel ~10 s. Cette rapidité s'explique par : Go (compilé), le parallélisme, l'absence de conversion d'AST entre les étapes et une architecture simple.

Utiliser esbuild directement

Installez-le et exécutez-le depuis la CLI.

npm install -D esbuild

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

API programmatique

Utilisez-le depuis un script de compilation pour mieux le contrôler.

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

esbuild supprime la syntaxe TypeScript (en transformant .ts en .js) bien plus rapidement que tsc. Il ne fait NOT pas de vérification de types — exécutez tsc --noEmit séparément pour cela.

# 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

Serveur de développement avec rechargement à chaud

esbuild possède un serveur de développement intégré avec un mode de surveillance et HMR via l'API de contexte.

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

Architecture des extensions

esbuild prend en charge les extensions avec deux principaux points d'accroche : onResolve (intercepter la résolution des modules) et onLoad (fournir le contenu des modules résolus).

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

Chargeurs

esbuild intègre des chargeurs pour : js, ts, jsx, tsx, json, css, text, base64, dataurl, file, binary. La prise en charge de CSS se limite au regroupement (pas de modules ni de PostCSS) — utilisez une extension ou un autre outil.

Limites par rapport à Rollup/Vite

1) L'écosystème d'extensions est plus réduit. 2) La chaîne de traitement CSS est minimale — pas de CSS Modules, pas de PostCSS ni de préprocesseurs disponibles par défaut. 3) Pas de HMR pour les frameworks (les frameworks comme React/Vue ont besoin d'un HMR spécifique). 4) Aucun avertissement ni aucune analyse concernant la suppression de code inutilisé. 5) Moins mature pour les configurations SSR complexes.

Quand esbuild excelle

1) Regroupement de bibliothèques (point d'entrée unique, sans framework). 2) Création de paquets pour Lambda/Worker (démarrage à froid minimal). 3) Sous-outil à l'intérieur de Vite/tsup (utilisé en interne pour transformer le TS). 4) Migration de tsc vers une chaîne de traitement TS plus rapide.

esbuild dans d'autres outils

Vite utilise esbuild pour la transformation de TS/JSX en développement et le pré-regroupement de node_modules. tsup utilise esbuild pour le regroupement de bibliothèques. Rollup possède une extension esbuild. De nombreux outils associent la rapidité d'esbuild à leur propre expérience utilisateur.

tsup — Wrapper esbuild adapté aux bibliothèques

Pour publier des bibliothèques npm, tsup enveloppe esbuild avec des valeurs par défaut pertinentes : génère CJS + ESM + .d.ts, surveille les modifications en développement et accepte une configuration simple.

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

Compromis liés à la taille du regroupement

esbuild minifie rapidement, mais sa minification est légèrement moins poussée que celle de Terser. Exécutez Terser comme étape finale pour obtenir une sortie absolument minimale, si la taille compte davantage que la vitesse de compilation.

Vérification rapide

esbuild peut remplacer tsc pour compiler du TypeScript — mais que ne fait NOT pas esbuild contrairement à tsc ?

Réponds-y dans la leçon interactive

Récapitulatif : esbuild

Outil de regroupement basé sur Go, 10 à 100 fois plus rapide que les outils de regroupement JS. CLI + API programmatique. Supprime le TS (sans vérification de types — exécutez tsc --noEmit). Points d'accroche d'extensions : onResolve + onLoad. Limites : écosystème d'extensions réduit, chaîne de traitement CSS minimale, pas de HMR pour les frameworks. Idéal pour : les bibliothèques, Lambda/Workers et l'utilisation dans Vite/tsup. Utilisez le wrapper tsup pour les bibliothèques npm.

Gratuit pour commencer

Apprends HTML avec un tuteur IA — gratuit

Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.

Cours: 41
Leçons: 163

Commencer gratuitement Voir le cours complet

Questions Fréquemment Posées

La leçon « esbuild : rapidité et limites » est-elle gratuite ?

Oui — le texte complet de « esbuild : rapidité et limites » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « esbuild : rapidité et limites » ?

Utilisez esbuild comme bundler autonome et comprenez pourquoi il est beaucoup plus rapide que webpack, ainsi que ses limites actuelles concernant les plugins et les types. Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Frontend Academy ?

Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.

Combien de temps prend la leçon « esbuild : rapidité et limites » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?

Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

Vite : système de plugins et mode SSR
esbuild : rapidité et limites
Espaces de travail pnpm pour les monorepos
Turbo : mise en cache et pipelines de tâches

← Retour à Frontend Academy