Otimização do Processo de Compilação

Durante o desenvolvimento, você executa um servidor de desenvolvimento com recarregamento automático. Para publicar, crie uma compilação de produção otimizada: um conjunto de arquivos estáticos ajustados para velocidade e tamanho reduzido, prontos para serem implantados em qualquer servidor.

O comando padrão compila seu app para produção. O Vite (as ferramentas padrão do Vue 3) compila, agrupa e otimiza tudo.

A compilação grava arquivos otimizados em uma pasta dist: um index.html, pacotes agrupados de JavaScript e CSS com identificadores e seus recursos estáticos. É essa pasta que você implanta.

Minificação remove espaços em branco e comentários e encurta os nomes das variáveis para que os arquivos sejam baixados mais rapidamente. As compilações de produção minificam JavaScript e CSS automaticamente.

Eliminação de código não utilizado remove o código que você nunca usa. Se importar uma função de uma biblioteca, o agrupador descarta o restante. Use importações nomeadas de módulos ES para permitir que essa eliminação funcione.

Os nomes dos arquivos da compilação incluem um identificador de conteúdo, como index-a1b2c3.js. Quando o código muda, o identificador também muda, então os navegadores buscam o novo arquivo e armazenam agressivamente em cache os que não foram alterados.

Para ver o que ocupa espaço no seu pacote, use uma extensão de visualização. Ela produz um gráfico interativo mostrando quais módulos ocupam mais espaço e orienta sua otimização.

Uma dependência grande que você quase não usa é um sinal de alerta. A análise pode revelar uma biblioteca pesada de datas ou gráficos que você pode substituir por uma alternativa menor ou carregar sob demanda.

O Vite expõe variáveis de ambiente prefixadas com VITE_ por meio de import.meta.env. Use-as para configurar URLs de API e sinalizadores de funcionalidades por ambiente.

O Vite carrega .env.production durante npm run build e .env.development durante npm run dev, para que cada ambiente receba automaticamente a configuração correta.

Antes de implantar, execute uma visualização local da compilação de produção para confirmar que ela funciona como esperado com arquivos reais e otimizados.

Teste seus conhecimentos sobre o processo de compilação.

Execute npm run build para produzir uma pasta dist otimizada, com recursos minificados, sem código não utilizado e com identificadores de conteúdo. Analise o tamanho do pacote para reduzir dependências pesadas e use variáveis de ambiente VITE_ com arquivos .env para configurar cada ambiente. Faça uma visualização antes de publicar. Em seguida, você implantará essa compilação em uma plataforma de hospedagem.