Vite: sistema de plugins e modo SSR
Escrever um plugin Vite com hooks de transformação e carregamento, integrar plugins de terceiros e configurar o Vite para renderização no servidor com a opção ssrBuild.
Vite: sistema de plugins e modo SSR é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 1 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.
Por que o Vite venceu
Vite (francês para “rápido”) foi criado por Evan You. Durante o desenvolvimento, ele disponibiliza os arquivos de origem sem empacotá-los, usando módulos ES nativos — com inicializações a frio instantâneas. Na produção, usa Rollup para criar o pacote. A experiência de desenvolvimento é muito mais rápida que a do Webpack.
Como funciona o servidor de desenvolvimento do Vite
Os navegadores modernos oferecem suporte nativo a módulos ES. O Vite disponibiliza os arquivos de origem como estão, transformando TypeScript e JSX sob demanda. Sem empacotamento, não há espera durante as inicializações a frio.
Substituição de módulos a quente
O HMR substitui módulos sem recarregar a página. O HMR do Vite é baseado em ESM e é muito mais rápido que o do Webpack. A maioria dos frameworks (React, Vue e Svelte) integra-se a ele para atualizar componentes individualmente, preservando o estado.
Noções básicas da configuração do Vite
Configure-o por meio de vite.config.ts na raiz do projeto.
// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
server: { port: 5173 },
build: {
outDir: 'dist',
sourcemap: true,
rollupOptions: {
output: {
manualChunks: {
react: ['react', 'react-dom']
}
}
}
}
});O sistema de plug-ins
Os plug-ins do Vite são uma extensão dos plug-ins do Rollup, com hooks adicionais para o servidor de desenvolvimento. Um plug-in é um objeto (ou uma função que retorna um objeto) com hooks nomeados.
// myPlugin.ts
export default function myPlugin() {
return {
name: 'my-plugin',
transform(code, id) {
if (!id.endsWith('.mdx')) return null;
// transform MDX to JS:
return { code: compileMdx(code), map: null };
},
handleHotUpdate(ctx) {
// react to file changes
}
};
}
// vite.config.ts
import myPlugin from './myPlugin';
export default { plugins: [myPlugin()] };Hooks principais
transform(code, id): modifica o conteúdo do arquivo (por exemplo, compila MDX e injeta o ambiente). load(id): fornece conteúdo para módulos virtuais. resolveId(source): personaliza a resolução de módulos. configureServer(server): adiciona middleware ao servidor de desenvolvimento.
Plug-ins populares
@vitejs/plugin-react (React + Fast Refresh). @vitejs/plugin-vue. vite-plugin-pwa. vite-plugin-svgr (importa SVGs como componentes). vite-plugin-checker (TypeScript e ESLint em uma sobreposição). vite-plugin-mkcert (HTTPS local).
Modo SSR do Vite
O Vite oferece renderização no lado do servidor com primitivas de baixo nível. Frameworks como Nuxt, SvelteKit, Remix e Astro são construídos sobre ele. Para SSR personalizado, siga o guia de SSR do Vite.
// server.ts
import { createServer } from 'vite';
const vite = await createServer({
server: { middlewareMode: true },
appType: 'custom'
});
express()
.use(vite.middlewares)
.use('*', async (req, res) => {
const url = req.originalUrl;
let template = await readFile('index.html', 'utf-8');
template = await vite.transformIndexHtml(url, template);
const { render } = await vite.ssrLoadModule('/src/entry-server.ts');
const appHtml = await render(url);
res.send(template.replace('<!--app-html-->', appHtml));
});Compilação para SSR
São necessárias duas compilações: cliente e servidor. vite build --ssr entry-server.ts gera o pacote do servidor.
// package.json
"scripts": {
"build:client": "vite build",
"build:server": "vite build --ssr src/entry-server.ts",
"build": "npm run build:client && npm run build:server"
}Variáveis de ambiente
import.meta.env.MODE é 'development' ou 'production'. As variáveis personalizadas com o prefixo VITE_ são expostas.
Tratamento de CSS
O Vite lida nativamente com CSS, módulos CSS (foo.module.css), PostCSS (detecta automaticamente postcss.config.js) e pré-processadores de CSS (Sass, Less e Stylus). Injete CSS crítico por meio de plug-ins.
Vite versus Webpack versus Turbopack
Vite: desenvolvimento nativo de ESM, compilações com Rollup e ecossistema amplo. Webpack: gigante legado, mais configurável e mais lento. Turbopack (Vercel): baseado em Rust, compatível com Webpack e atualmente integrado ao Next. Para projetos novos: Vite para SPAs e Next/Turbopack para projetos específicos do Next.
Verificação rápida
Por que a inicialização a frio do servidor de desenvolvimento do Vite é muito mais rápida que a do Webpack?
Recapitulação: Vite
Servidor de desenvolvimento baseado em ESM: inicialização a frio instantânea e HMR rápido. A produção usa Rollup. Os plug-ins estendem os hooks do Rollup (transform, load e resolveId), além dos hooks específicos do Vite (configureServer e handleHotUpdate). Modo SSR por meio de createServer + middlewareMode; compile com --ssr. Plug-ins para PWA, MDX, SVGR e mkcert. Use import.meta.env para variáveis de ambiente. Módulos CSS, PostCSS e pré-processadores integrados.
Perguntas Frequentes
A aula “Vite: sistema de plugins e modo SSR” é grátis?
Sim — o texto completo de “Vite: sistema de plugins e modo SSR” é 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: sistema de plugins e modo SSR”?
Escrever um plugin Vite com hooks de transformação e carregamento, integrar plugins de terceiros e configurar o Vite para renderização no servidor com a opção ssrBuild. 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 1 de 4.
Quanto tempo leva a aula “Vite: sistema de plugins e modo SSR”?
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