2.1 — O que é o Vite e por que ele existe

Entenda o problema que o Vite resolve e por que ele é tão mais rápido que bundlers tradicionais.

Objetivos da Aula

• Compreender o contexto histórico dos bundlers JavaScript
• Entender os problemas de performance do Webpack e similares
• Conhecer a abordagem revolucionária do Vite com ESModules nativos

O Problema: A Era do Bundling

Antes dos ES Modules serem suportados nativamente pelos navegadores, não existia uma forma nativa de escrever JavaScript modular. Por isso surgiu o conceito de bundling: ferramentas que processam, transformam e concatenam seus módulos em arquivos que o navegador consegue executar.

Como funcionam os bundlers tradicionais

O bundler precisa:

1. Ler todos os arquivos do projeto
2. Construir um grafo de dependências completo
3. Transformar o código (TypeScript, JSX, etc.)
4. Concatenar tudo em um ou mais bundles
5. Só então servir para o navegador

O problema de escala

Projetos modernos podem ter milhares de módulos. Em aplicações grandes:

• O servidor de desenvolvimento pode levar minutos para iniciar
• Alterações simples podem demorar segundos para aparecer no navegador
• O Hot Module Replacement (HMR) fica lento conforme o projeto cresce

src/
├── components/     150 componentes
├── pages/          50 páginas
├── utils/          80 utilitários
├── hooks/          40 hooks
├── services/       30 serviços
└── styles/         60 arquivos CSS

Total: ~400+ módulos
Webpack cold start: 15-45 segundos
Webpack HMR: 500ms - 2s por edição

A Solução: Vite e ESModules Nativos

O Vite resolve esse problema com uma abordagem fundamentalmente diferente: não fazer bundling durante o desenvolvimento.

ESModules Nativos no Navegador

Desde 2018, todos os navegadores modernos suportam ESModules nativamente:

<!-- O navegador entende isso nativamente agora! -->
<script type="module" src="/src/main.ts"></script>

// main.ts
// imports funcionam direto no navegador!
import { createApp } from './app.ts'
import { formatDate } from './utils/date.ts'

createApp()

Como o Vite funciona

O Vite delega o trabalho de resolução de módulos para o navegador. Ele só transforma os arquivos quando são solicitados.

Comparativo de Performance

Por que essa diferença?

Webpack: Precisa processar todo o projeto antes de servir qualquer coisa.

Vite: Processa apenas o que é solicitado, sob demanda.

Exemplo Prático: Sentindo a Diferença

Vamos criar dois projetos idênticos para sentir a diferença:

Projeto com Webpack

# NÃO execute isso agora, é só para ilustração
mkdir meu-app-webpack && cd meu-app-webpack
pnpm init
pnpm add webpack webpack-cli webpack-dev-server html-webpack-plugin
# configurar webpack.config.js manualmente...
pnpm dlx webpack serve

# ⏱️ Tempo até ver algo no navegador: ~15-30 segundos

Projeto com Vite

# Vamos criar esse!
pnpm create vite@latest meu-app-vite -- --template svelte-ts
cd meu-app-vite
pnpm install
pnpm dev

# ⏱️ Tempo até ver algo no navegador: ~2-3 segundos

As Duas Faces do Vite

O Vite funciona de forma diferente em desenvolvimento e produção:

Desenvolvimento

• Usa ESModules nativos
• Não faz bundling
• Transforma arquivos sob demanda
• HMR ultra-rápido

Produção

• Usa Rollup para bundling
• Gera bundles otimizados
• Tree-shaking, minificação
• Code splitting automático

Tecnologias por Trás do Vite

esbuild

Escrito em Go, é 10-100x mais rápido que bundlers JavaScript. O Vite usa para:

• Pré-compilar dependências
• Transformar TypeScript/JSX

Rollup

Bundler maduro e otimizado. O Vite usa para:

• Build de produção
• Code splitting
• Tree-shaking

Resumo

🎯 Mini-Projeto: Primeiros Passos

Nesta aula, vamos criar a base do nosso Dashboard de Performance:

Passo 1: Criar o projeto

# Navegue até a pasta onde quer criar o projeto
cd ~/projetos  # ou sua pasta preferida

# Crie o projeto Vite
pnpm create vite@latest dashboard-vite -- --template svelte-ts

# Entre na pasta
cd dashboard-vite

# Instale as dependências
pnpm install

# Inicie o servidor de desenvolvimento
pnpm dev

Passo 2: Observe o tempo de inicialização

Quando rodar pnpm dev, observe:

• Quanto tempo levou para o servidor iniciar?
• A mensagem mostra algo como ready in XXX ms

# Você deve ver algo assim:
  VITE v5.x.x  ready in 237 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

Passo 3: Explore a estrutura criada

dashboard-vite/
├── index.html          # Ponto de entrada (note o script type="module")
├── src/
│   ├── App.svelte      # Componente principal
│   ├── main.ts         # Módulo principal
│   ├── app.css         # Estilos
│   └── vite-env.d.ts   # Tipos do Vite
├── public/             # Arquivos estáticos
│   └── vite.svg
├── svelte.config.js    # Configuração do Svelte
├── tsconfig.json       # Configuração do TypeScript
├── vite.config.ts      # Configuração do Vite
├── package.json        # Dependências e scripts
└── node_modules/       # Dependências instaladas

Passo 4: Abra o index.html e observe

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- Note o type="module" - isso ativa ESModules nativos! -->
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

✅ Desafio da Aula

Objetivo

Modificar o projeto criado para exibir o tempo de carregamento da página.

Instruções

1. Abra o arquivo main.ts
2. Adicione código para medir e exibir quanto tempo a página levou para carregar
3. O tempo deve aparecer na tela, dentro do #app

Dica

Use performance.now() para medir o tempo:

const inicio: number = performance.now()
// ... código ...
const fim: number = performance.now()
const tempo: number = fim - inicio

Spec de Verificação

Seu desafio está completo quando:

• A página exibe o tempo de carregamento em milissegundos
• O tempo aparece em algum lugar visível na página
• O console não mostra erros

Solução (só olhe depois de tentar!)

// main.ts
import './style.css'
import { setupCounter } from './counter.ts'

// Marca o início
const inicioCarregamento: number = performance.now()

document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <h1>Dashboard Vite</h1>
    <div class="card">
      <button id="counter" type="button"></button>
    </div>
    <p id="tempo-carregamento" class="read-the-docs">
      Calculando tempo de carregamento...
    </p>
  </div>
`

setupCounter(
  document.querySelector<HTMLButtonElement>('#counter')!
)

// Calcula e exibe o tempo após o DOM ser atualizado
requestAnimationFrame(() => {
  const fimCarregamento: number = performance.now()
  const tempoTotal: string =
    (fimCarregamento - inicioCarregamento).toFixed(2)

  document
    .querySelector('#tempo-carregamento')!
    .textContent = `Página carregada em ${tempoTotal}ms`
})

🧪 Exercício Interativo

Pratique o que aprendeu com o exercício interativo!

📁 Local: exercicios/modulo-01/exercicio-1.1/

cd ../../exercicios/modulo-01/exercicio-1.1
pnpm install
pnpm test

No exercício você vai criar funções para:

• Medir tempo de execução de funções
• Formatar o tempo em milissegundos ou segundos

Todos os testes passando = aula concluída com sucesso! ✅

📚 Recursos Adicionais

• Por que Vite? - Documentação Oficial
• Features do Vite

Próxima aula: 2.2 — Arquitetura do Vite