Vite é uma ferramenta de construção para front-end. Ele fornece uma ferramenta de criação rápida e opinativa pronta para uso, com API altamente personalizável usando plug-ins.
Vite usa Rollup.js internamente para empacotamento. É independente de plataforma, o que significa que oferece suporte a muitas bibliotecas de front-end populares, incluindo React, Vue.js, Preact e vanilla JavaScript, por meio de modelos.
A versão mais recente desse ambiente JavaScript sem empacotamento vem com muitos novos recursos interessantes. Lançado em 16 de fevereiro de 2021, o Vite 2.0 apresenta uma arquitetura completamente redesenhada, um novo sistema de plug-ins, suporte CSS de primeira classe pronto para uso e muito mais.
Neste guia, vamos apresentar o Vite e dar uma olhada em alguns das principais mudanças que acompanham o Vite 2.0.
Aqui está o que vamos cobrir:
- O que é Vite?
- Como funciona o Vite?
- Novos recursos no Vite 2.0
- Construindo um aplicativo React usando Vite 2.0
O que é Vite?
Vite é uma ferramenta de construção que foi inicialmente desenvolvida para Vue.js. Com a nova atualização, o Vite agora oferece suporte à maioria das estruturas da web.
O Vite fornece código-fonte em ESM nativo . As importações dinâmicas condicionais são processadas apenas quando usadas pela tela atual requer a importação. O navegador faz a tarefa de agrupar o código-fonte. O Vite só serve e transforma o código-fonte sob demanda, conforme solicitado pelo navegador.
Como funciona o Vite?
Quando os módulos ES foram introduzidos pela primeira vez em ES2016 , o suporte do navegador para módulos ES6 geralmente era ruim. Agora que muitos navegadores modernos suportam módulos ES nativos e você pode usar as instruções import e export nativamente, é possível incluir importações em seu HTML usando o módulo type +"Atributo" em sua tag de script para especificar que você está importando um módulo:
A sintaxe de importação ES no código-fonte é fornecida diretamente para o navegador. Qualquer navegador que suporte o nativo os analisa automaticamente e, a seguir, faz solicitações HTTP para cada importação. O servidor de desenvolvimento intercepta as solicitações HTTP do navegador e realiza transformações de código quando necessário.
Isso torna o servidor Vite incrivelmente rápido: a inicialização a frio fica por volta de 140 ms em comparação com Vue-CLI 1900 ms .
Novos recursos no Vite 2.0
Agora que entendemos o que é Vite e como funciona, vamos dar uma olhada mais detalhada nas novidades do Vite 2.0 e explorar como a versão mais recente ajuda a melhorar a experiência geral do desenvolvedor.
Compilações mais rápidas
O Vite 2.0 vem com um tempo de construção mais rápido usando esbuild . esbuild é um bundler escrito em Go. É de 10 a 100 vezes mais rápido do que outros empacotadores.
Vite 2.0 usa esbuild para converter módulos CommonJS em ESM para dependências. De acordo com a nota de versão do Vite 2.0 s , usando esbuild em vez de Rollup leva a um grande aumento de desempenho no tempo de construção. Atualmente, esbuild é usado para dependências de pré-agrupamento, mas a equipe Vite está planejando mudar completamente para esbuild no futuro.
Agnóstico em termos de estrutura
O Vite 2.0 fornece um padrão de alta qualidade para muitas estruturas populares, incluindo Vue.js, React, Preact e muito mais. Ele também fornece um padrão JavaScript básico. TypeScript é compatível desde o início com boilerplates como React e Typescript, Vue e Typescript, etc.
Dada a sua natureza agnóstica de frameworks, o Vite ajuda a facilitar uma experiência de ferramentas uniformes em todos os frameworks.
Novo sistema de plugins
O novo sistema de plug-ins do Vite melhora a experiência do desenvolvedor ao fazer coisas como identificar o tipo de construção e acessar configurações e configurações de servidor de desenvolvimento, para citar apenas alguns exemplos. É compatível com muitos plug-ins Rollup.js prontos para uso.
O novo sistema de plug-in expõe API para adicionar middleware ao servidor de desenvolvimento e usa manipulação de recarregamento de módulo ativo personalizado. O sistema de plugins é baseado em WMR. O novo sistema estende o sistema de plug-ins Rollup, fornecendo operações específicas do Vite.
Suporte experimental para SSR
Vite agora tem suporte experimental para SSR. Suporta SSR para Vue 3 e React.js. O Vite fornece APIs e construções para carregar e atualizar com eficiência o código-fonte com base no ESM e externalizar automaticamente as dependências compatíveis com CommonJS.
Vite SSR é um recurso de nível muito baixo; a equipe tem como objetivo fornecer ferramentas para um recurso de nível superior.
O SSR pode ser completamente desacoplado do Vite na construção de produção. Também pode suportar pré-renderização com a mesma configuração.
Suporte a CSS aprimorado
O Vite 2.0 apresenta novos recursos de CSS, como divisão de CSS, nova base de URL e muito mais. O Vite oferece suporte a esses recursos prontos para uso, sem a necessidade de qualquer configuração. Os caminhos @import e url () em CSS são aprimorados com o resolvedor de Vite para respeitar aliases e dependências npm.
Criação de um aplicativo React usando Vite 2.0
Para simplificar, o Vite 2.0 parece incrível. Vamos fazer um test drive com o Vite 2.0, construindo um aplicativo React muito básico e básico.
Comece usando o modelo React para o boilerplate do Vite 2.0:
yarn create @ vitejs/app my-react-app--template react-ts
A estrutura da pasta é a seguinte:
Agora, seu clichê Vite, React e TypeScript está pronto.
Você pode instalar dependências usando o comando npm i ou yarn . Depois que as dependências forem instaladas, inicie o servidor de desenvolvimento usando o comando yarn dev .
Conclusão
Vite começou como um servidor de desenvolvimento para Vue.js, mas com o tempo, ele evoluiu para uma solução completa de ferramentas de front-end. O Vite 2.0 fornece uma ferramenta de desenvolvimento web opinativa. O uso de esbuild para builds de desenvolvedor e empacotamento Rollup durante a produção serve para aprimorar a experiência geral do desenvolvedor. A configuração pronta para uso torna o Vite uma solução sólida para seu próximo projeto de desenvolvimento.
A postagem O que há de novo no Vite 2.0 apareceu primeiro em LogRocket Blog .
