Se você é um desenvolvedor de aplicações web já deve ter ouvido falar sobre o Vite. Mas o que de fato ele é ?
Os problemas antes do Vite
Antes que os módulos ES estivessem disponíveis nos navegadores, os desenvolvedores não tinham mecanismo nativo para criar JavaScript de forma modularizada. É por isso que estamos todos familiarizados com o conceito de “agregação”: usar ferramentas que rastreiam, processam e concatenam nossos módulos de origem em arquivos que podem ser executados no navegador.
Ao longo do tempo vimos ferramentas como webpack , Rollup e Parcel , que melhoraram muito a experiência de desenvolvimento para desenvolvedores frontend.
No entanto, à medida que começamos a construir aplicativos cada vez mais ambiciosos, a quantidade de JavaScript com que estamos lidando também aumentou exponencialmente. Não é incomum que projetos de grande escala contenham milhares de módulos. Estamos começando a atingir um gargalo de desempenho para ferramentas baseadas em JavaScript: muitas vezes pode levar uma espera excessivamente longa (às vezes até minutos!) no navegador. O ciclo de feedback lento pode afetar muito a produtividade e a felicidade dos desenvolvedores.
A Vite visa resolver esses problemas aproveitando novos avanços no ecossistema: a disponibilidade de módulos ES nativos no navegador e o surgimento de ferramentas JavaScript escritas em linguagens de compilação para nativas.
Início lento do servidor
Ao iniciar o servidor de desenvolvimento a frio, uma configuração de compilação baseada em bundler precisa rastrear e compilar avidamente todo o seu aplicativo antes que ele possa ser servido.
O Vite melhora o tempo de início do servidor de desenvolvimento dividindo primeiro os módulos em um aplicativo em duas categorias: dependências e código-fonte .
- As dependências são principalmente JavaScript simples que não mudam com frequência durante o desenvolvimento. Algumas grandes dependências (por exemplo, bibliotecas de componentes com centenas de módulos) também são muito caras para processar. As dependências também podem ser enviadas em vários formatos de módulo (por exemplo, ESM ou CommonJS).
Dependências pré-empacotadas do Vite usando esbuild . O Esbuild é escrito em Go e pré-empacota dependências 10 a 100 vezes mais rápido que os bundlers baseados em JavaScript.
- O código -fonte geralmente contém JavaScript não simples que precisa ser transformado (por exemplo, componentes JSX, CSS ou Vue/Svelte) e será editado com muita frequência. Além disso, nem todo código-fonte precisa ser carregado ao mesmo tempo (por exemplo, com divisão de código baseada em rota).
O Vite fornece código-fonte sobre o ESM nativo . Isso basicamente permite que o navegador assuma parte do trabalho de um empacotador: o Vite só precisa transformar e servir o código-fonte sob demanda, conforme o navegador o solicita. O código por trás das importações dinâmicas condicionais só é processado se realmente usado na tela atual.
Além dessas características você também pode ver uma tabela de comparação com outras soluções de bundle: https://vitejs.dev/guide/comparisons.html
E agora que vimos o que é o Vite, que tal migrarmos uma aplicação Quasar que utiliza webpack para Vite ?
Migrando uma aplicação @quasar/webpack para @quasar/vite
Nesta minha playlist no youtube vimos em quase 30 vídeos como criar uma aplicação com Quasar, Vue 3 e Supabase.
Só que ela utilizava o Quasar CLI com Webpack para empacotamento. Agora é possível também utilizar o Quasar CLI para criar e migrar aplicações para utilizar o Vite como seu gerador de bundle.
Existe um passo a passo na documentação oficial do Quasar que podemos utilizar como base: https://quasar.dev/quasar-cli-vite/convert-to-quasar-cli-with-vite
Além disso fiz um vídeo passo a passo para fazermos juntos esse processo e o resultado ficou incrível! Menos de 1 segundo para levantar o nosso ambiente de desenvolvimento:
Finalizando por aqui sem dúvidas o Vite é o conjunto de ferramentas do desenvolvimento de aplicações da próxima geração. E ele pode ser usado já com outros frameworks também como React, Ionic, etc.
Espero que seja útil para seus estudos, até breve.
