Uma introdução ao Vite

Intro

Vite, do Francês: Rápido, é uma webtool agnóstica a Framework para desenvolvimento de aplicações web frontend. Com apenas alguns comandos você consegue montar um ambiente para trabalhar com tecnologias como Vue, React e até mesmo o Javascript Puro (Vanilla).
Enfim: é uma ferramenta facilitadora!

Ela foi criada por Evan You, que já tem em seu currículo o famoso Vue.js, além de contar com um time com nomes de peso do ecossistema de “frontenders”.

Diferenciais

Desde a base do desenvolvimento, o time manteve os pilares: Velocidade e simplicidade.

Vite já vem com o próprio webserver e um “bundler” de javascript, css e outros “assets” facilitando a disponibilização para produção.

Mas bundler não é necessariamente uma novidade hoje em dia, então qual é a vantagem?

A possibilidade de importar javascript modular (ES Modules) de forma nativa é relativamente recente, e como atualmente já temos a compatibilidade garantida com a maioria dos principais navegadores, o Vite explora essa novidade, o que possibilita o carregamento de código quase que instantaneamente.

Hot Module Replacement (HMR)

O sistema HMR nativo é extremamente rápido e totalmente escalável, mantendo a velocidade mesmo em projetos grandes.

Ele troca, adiciona ou remove módulos com a aplicação rodando, sem a necessidade de recarregar os demais módulos que não estão envolvidos em tais mudanças.

Uma das vantagens do HMR é manter o estado da aplicação (que seria perdido ao recarregar tudo), acelerando o desenvolvimento ao atualizar apenas o que mudou.

Sistema de Plugins

Vite também pode ser estendido usando plugins. O sistema é baseado na estável interface do rollup, com algumas adições específicas.

É possível, por exemplo, opcionalmente por meio de um plugin usar Server Side Rendering (SSR) no seu projeto, como vemos no NextJS.

Conclusão

O Vite se torna uma das melhores e mais fáceis alternativas ao Creat React App (CRA), por exemplo, que é o padrão sugerido pela Meta, mas que está há um longo tempo sem atualização. Com ele, teremos um início sólido de aplicação Front-end, sem complicação.

Já testou? Compartilhe com a gente os seus insights!