Frontend Academy · Aula

esbuild: velocidade e limitações

Utilizar esbuild como empacotador autónomo e compreender por que motivo é várias ordens de grandeza mais rápido do que o webpack, bem como as suas limitações atuais relativas a plugins e tipos.

esbuild: velocidade e limitações é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.

O que é o esbuild?

esbuild é um empacotador e minificador escrito em Go. Ele é de 10 a 100 vezes mais rápido que os empacotadores baseados em JavaScript por usar multithreading nativo e não ter custo de inicialização. Criado por Evan Wallace (Figma).

Benchmarks de velocidade

Empacotando o código-fonte do React (cerca de 6 MB): esbuild ~0,4 s, Webpack ~9 s, Rollup ~6 s, Parcel ~10 s. A velocidade vem de: Go (compilado), paralelismo, nenhuma conversão de AST entre etapas e uma arquitetura simples.

Usando o esbuild diretamente

Instale e execute pela CLI.

npm install -D esbuild

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

API programática

Use em um script de compilação para ter mais controle.

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

O esbuild remove a sintaxe do TypeScript (transformando .ts em .js) muito mais rápido que o tsc. Ele não faz verificação de tipos (NOT) — execute tsc --noEmit separadamente para isso.

# 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

Servidor de desenvolvimento com recarregamento automático

O esbuild tem um servidor de desenvolvimento integrado, com modo de observação e HMR por meio da API de contexto.

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

Arquitetura de extensões

O esbuild oferece suporte a extensões com dois ganchos principais: onResolve (intercepta a resolução de módulos) e onLoad (fornece conteúdo para os módulos resolvidos).

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

Carregadores

O esbuild tem carregadores integrados para: js, ts, jsx, tsx, json, css, text, base64, dataurl, file e binary. O suporte a CSS é apenas para empacotamento (sem módulos e sem PostCSS) — use uma extensão ou outra ferramenta.

Limitações em comparação com Rollup/Vite

1) O ecossistema de extensões é menor. 2) O fluxo de CSS é mínimo — sem CSS Modules, sem PostCSS e sem pré-processadores prontos de fábrica. 3) Não há HMR para frameworks (frameworks como React/Vue precisam de HMR específico do framework). 4) Não há avisos nem análise sobre eliminação de código não utilizado. 5) É menos maduro para configurações complexas de SSR.

Quando o esbuild se destaca

1) Empacotamento de bibliotecas (um único ponto de entrada, sem framework). 2) Empacotamento para Lambda/Workers (inicialização a frio mínima). 3) Ferramenta auxiliar dentro do Vite/tsup (usada para a transformação de TS nos bastidores). 4) Migração do tsc para um fluxo de TS mais rápido.

O esbuild dentro de outras ferramentas

O Vite usa o esbuild para a transformação de TS/JSX durante o desenvolvimento e para o pré-empacotamento de node_modules. O tsup usa o esbuild para empacotar bibliotecas. O Rollup tem uma extensão do esbuild. Muitas ferramentas combinam a velocidade do esbuild com sua própria experiência de uso.

tsup — Wrapper do esbuild para bibliotecas

Para publicar bibliotecas npm, o tsup envolve o esbuild com padrões sensatos: gera CJS + ESM + .d.ts, observa alterações durante o desenvolvimento e aceita uma configuração simples.

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

Compromissos no tamanho do empacotamento

O esbuild faz a minificação rapidamente, mas sua minificação é um pouco menos agressiva que a do Terser. Execute o Terser como uma etapa posterior para obter a menor saída possível, se o tamanho for mais importante que a velocidade de compilação.

Verificação rápida

O esbuild pode substituir o tsc para compilar TypeScript — mas o que o esbuild não faz (NOT) e o tsc faz?

Recapitulação: esbuild

Empacotador baseado em Go, de 10 a 100 vezes mais rápido que os empacotadores de JS. CLI + API programática. Remove TS (sem verificação de tipos — execute tsc --noEmit). Ganchos de extensões: onResolve + onLoad. Limitações: ecossistema de extensões reduzido, fluxo de CSS mínimo e ausência de HMR para frameworks. Ideal para: bibliotecas, Lambda/Workers e uso dentro do Vite/tsup. Use o wrapper tsup para bibliotecas npm.

Perguntas Frequentes

A aula “esbuild: velocidade e limitações” é grátis?

Sim — o texto completo de “esbuild: velocidade e limitações” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.

O que vou aprender em “esbuild: velocidade e limitações”?

Utilizar esbuild como empacotador autónomo e compreender por que motivo é várias ordens de grandeza mais rápido do que o webpack, bem como as suas limitações atuais relativas a plugins e tipos. Você pratica Frontend Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Frontend Academy?

Nenhuma experiência prévia é necessária. Frontend Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “esbuild: velocidade e limitações”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Frontend Academy?

Sim. Cada aula de Frontend Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

Vite: sistema de plugins e modo SSR
esbuild: velocidade e limitações
Workspaces pnpm para monorepos
Turbo: armazenamento em cache e pipelines de tarefas

← Voltar para Frontend Academy