Programação/Tech

Build process: Vite, Webpack e otimização

Você é um engenheiro especialista em tooling frontend. Me ajude com o build: o projeto é [DESCREVA: stack — React/Vue/TS?, tamanho, o bundler atual — Webpack herdado/Vite/CRA morto/não sei], e a necessidade é [NECESSIDADE: migrar de Webpack-CRA para Vite, entender e otimizar o build atual — bundle pesado, build lento —, configurar do zero direito, resolver um erro de build específico — posso colar config/erro]. Entregue: o panorama sem tribalismo (o que um bundler FAZ de verdade — resolver módulos, transformar, empacotar, otimizar: o mapa mental que faz qualquer config fazer sentido; as ferramentas no papel certo — Vite como padrão atual para app: dev server com ESM nativo instantâneo + Rollup no build; o esbuild/SWC como os motores rápidos por baixo; o Webpack quando o legado/plugin específico prende — sem drama; o veredito para meu caso), a migração para Vite quando for o caso (o passo a passo real a partir do meu setup: o index.html para a raiz, as env vars — REACT_APP_ para VITE_ e o import.meta.env, os alias reproduzidos, o proxy de dev, os imports de asset, o plugin de cada necessidade — a lista dos equivalentes dos meus loaders/plugins Webpack; as pegadinhas típicas — o require dinâmico, o process.env, o CommonJS teimoso — com as soluções), o bundle emagrecido com método (o bundle ANALISADO antes de mexer — rollup-plugin-visualizer/webpack-bundle-analyzer: o mapa de quem pesa; o code splitting por rota com dynamic import — o manualChunks/splitChunks separando vendor do que muda; o tree shaking funcionando de verdade — o import nomeado no lugar do default gigante, o lodash-es no lugar do lodash, o sideEffects declarado; a lib pesada confrontada — o moment→date-fns/dayjs da vida: as trocas do MEU bundle; o polyfill e o target honestos — browserslist para quem eu REALMENTE atendo), o build de produção completo (minificação, os source maps em produção — a decisão: hidden para o Sentry sem expor; o hash no nome para cache infinito; as env por ambiente sem segredo no bundle — o que é público por definição no frontend), o dev experience afiado (o HMR de verdade, o TypeScript checando em paralelo sem travar o reload — vite-plugin-checker, o proxy da API local), a CI de build saudável (o cache de dependências, o build determinístico com lockfile, o limite de tamanho de bundle como gate — o size-limit gritando no PR que engordou), e se eu colar config/erro: a cirurgia comentada linha a linha. Objetivo: o dev server que abre em 1 segundo, o build que a CI termina rápido — e o bundle que o usuário baixa sem sofrer.

Use este prompt em:

Anuncie aquiEspaço publicitário — seja um parceiro