0Pricing
Frontend Academy · Aula

Vite: servidor de desenvolvimento e build

Inicie um projeto Vite, use seu servidor de desenvolvimento HMR instantâneo, execute o comando de build e visualize a saída de produção.

Vite: servidor de desenvolvimento e build é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 3 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 é Vite?

Vite é uma ferramenta de compilação de front-end de próxima geração, criada por Evan You (criador do Vue). Ela fornece um servidor de desenvolvimento extremamente rápido usando ESM nativo e esbuild, além de uma compilação de produção baseada no Rollup.

Criando um projeto Vite

npm create vite@latest cria a estrutura de um projeto novo. Escolha sua estrutura (Vanilla, React, Vue, Svelte, Preact, Lit) e sua variante (JS ou TS). O projeto fica pronto imediatamente — não é necessária nenhuma configuração.

npm create vite@latest my-app
# Choose: React + TypeScript

cd my-app
npm install
npm run dev  # dev server on localhost:5173

O servidor de desenvolvimento — início instantâneo

O Vite não empacota o código durante o desenvolvimento. Ele disponibiliza cada arquivo como um módulo ESM nativo. O navegador os importa diretamente. Sem empacotamento, o início a frio leva menos de 100 ms, independentemente do tamanho do projeto. Apenas os arquivos alterados são recompilados durante o HMR.

HMR — substituição a quente de módulos

O HMR do Vite substitui apenas o módulo alterado no aplicativo em execução, sem recarregar a página inteira. No React com @vitejs/plugin-react, o estado dos componentes é preservado durante o HMR. As alterações aparecem em menos de 50 ms.

O vite.config.js / vite.config.ts

O Vite é configurado com um arquivo vite.config.ts. Opções comuns: plugins, aliases de resolução, porta do servidor, proxy para chamadas de API e diretório de saída da compilação.

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: { '@': '/src' },
  },
  server: {
    port: 3000,
    proxy: {
      '/api': 'http://localhost:8080',
    },
  },
});

Variáveis de ambiente

O Vite disponibiliza variáveis de ambiente com o prefixo VITE_ por meio de import.meta.env. Armazene-as em .env, .env.development e .env.production. Nunca use o prefixo VITE_ em segredos — eles são incluídos no pacote do navegador.

# .env
VITE_API_URL=https://api.example.com

# In code:
const apiUrl = import.meta.env.VITE_API_URL;

npm run build — compilação de produção

npm run build invoca o Rollup internamente para empacotar, minificar e eliminar código não utilizado do aplicativo. A saída vai para a pasta dist/, pronta para implantação.

npm run build
# Output:
# dist/
#   index.html
#   assets/
#     index-a1b2c3.js  (minified app bundle)
#     vendor-d4e5f6.js  (node_modules chunk)
#     index-7h8i9j.css

Analisando o pacote

Use vite-bundle-visualizer ou rollup-plugin-visualizer para gerar um mapa em árvore do conteúdo do pacote. Isso ajuda a identificar dependências grandes demais e oportunidades de carregamento sob demanda.

npm run preview

npm run preview disponibiliza localmente a compilação de produção em dist/. Use-o para verificar a compilação de produção antes da implantação — ele identifica problemas que só aparecem quando o aplicativo não está no modo de desenvolvimento.

Divisão de código no Vite

Instruções import() dinâmicas criam automaticamente blocos separados. Rotas carregadas sob demanda do React Router e o defineAsyncComponent do Vue também acionam a divisão. Verifique os tamanhos dos blocos na saída da compilação.

Vite para bibliotecas

O modo de biblioteca do Vite (build.lib) compila bibliotecas npm, gerando os formatos ESM e CJS. Especifique uma lista de dependências externas para evitar empacotar dependências pares, como React.

Verificação rápida

Por que o servidor de desenvolvimento do Vite é mais rápido que o do webpack?

Recapitulação: Vite

npm create vite@latest cria a estrutura instantaneamente. O servidor de desenvolvimento usa ESM nativo — sem empacotamento, HMR instantâneo. vite.config.ts é usado para plugins, aliases e proxy. O prefixo VITE_ é usado em variáveis de ambiente seguras para o navegador. npm run build produz um pacote Rollup otimizado. npm run preview testa localmente a compilação de produção.

Perguntas Frequentes

A aula “Vite: servidor de desenvolvimento e build” é grátis?

Sim — o texto completo de “Vite: servidor de desenvolvimento e build” é 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 “Vite: servidor de desenvolvimento e build”?

Inicie um projeto Vite, use seu servidor de desenvolvimento HMR instantâneo, execute o comando de build e visualize a saída de produção. 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 3 de 4.

Quanto tempo leva a aula “Vite: servidor de desenvolvimento e build”?

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

  1. Módulos ES: import export e importação dinâmica
  2. npm e package.json: dependências scripts
  3. Vite: servidor de desenvolvimento e build
  4. Conceitos de empacotamento: tree shaking e divisão de código
← Voltar para Frontend Academy