Blog

Webpack - Funcionamento e problemas

Vamos dar uma pincelada em como o Webpack funciona. A seguir, são listados os passos para obter a aplicação em ambiente de produção:

• Primeiramente o Webpack localiza o arquivo de entrada (entry file) e a partir dele é gerada a árvore de dependências, ou seja, todos os imports, exports e requires dos seus códigos e arquivos são mapeados em uma árvore especificando suas dependências.

• Tendo a árvore pronta, é realizado o processo de transpilação e compilação: é aqui onde o Typescript, ECMAScript são transpilados para Javascript legíveis para os navegadores mais antigos, assim como Sass, Less e outros pré-processadores.

• Após a transpilação e compilação, é necessário classificar, reescrever e concatenar o código.

• Por final o Webpack dá aquela otimizada no código.

Agora se você está rodando o Webpack em ambiente de desenvolvimento, o processo é um pouco diferente, imagine que agora você está usando o Framework Vue.js e então você roda o comando npm run serve, caso utilize o vue-cli:

• Primeiramente o Webpack vai agrupar todo o seu código (fazer o bundle).

• Será iniciado o webpac-dev-server, que por trás dele tem o Express.js servindo o código empacotado

• Por final são criados sockets de configuração que irão realizar o Hot Module Reloading

Em ambiente de desenvolvimento surge um problema. Quando seu projeto começa a crescer, a quantidade de dependências provavelmente também irá crescer, o que faz com que o processo descrito anteriormente se torne custoso, pois é necessário fazer o build de todo o seu código antes de servi-lo.

Módulos JavaScript nativos (ESM ou Módulos EcmaScript)!

Uma boa notícia é que, os navegadores modernos começaram a dar suporte nativamente à funcionalidade de módulos. Agora eles podem otimizar o carregamento, tornando-os mais eficientes, eliminando o processamento extra no lado do cliente e viagens de ida e volta desnecessárias. Entretanto, para utilizar os módulos JavaScript nativos, os navegadores devem possuir suporte às declarações estáticas import e export. É com base nessa novidade que o Vite sai na frente entre as ferramentas existentes.

💡 Clique aqui para dá aquela olhada nos navegadores que já implementaram essa funcionalidade.

Segue um exemplo de utilização:

Vite - Entendendo o funcionamento

O Vite (palavra francesa para rápido) é uma ferramenta de build que tem o objetivo de fornecer uma experiência de desenvolvimento mais rápida e enxuta para projetos web modernos. Ela funciona em duas partes, o servidor de desenvolvimento que tem várias funcionalidades que tornam a experiência e debugging mais rápido e fácil, e um comando de build pré-configurado que tem como saída um código bem otimizado para produção.

O comando de build do Vite

Já o servidor de desenvolvimento funciona dividindo o código em duas partes, a parte que contém as dependências externas que estão na pasta node_modules, essas dificilmente serão atualizadas, a não ser que você instale um pacote novo, e a parte que contém o seu código. Essas duas partes são tratadas de forma diferente:

• Rodando o servidor de desenvolvimento pela primeira vez, as dependências da pasta node_modules , que estão sendo usados no seu projeto, são transpilados e buildados utilizando o ES Builder, escrito com a linguagem Go, que possui uma velocidade de 10 a 100 vezes mais rápido que os transpiladores escritos em Javascript.

• Após o ES Builder ter feito seu trabalho, quando os módulos das dependências da pasta node_modules forem requisitadas, o servidor de arquivos estáticos enviara junto com elas as suas dependências extras.

• Para os seus códigos, será criada uma árvore de dependência que posteriormente será utilizada na hora da requisição das rotas, carregando-os de forma individual. A árvore dependências é montada a partir dos ES Modules (módulos Javascript) importados no arquivo index.html da sua aplicação. Comparando esse processo com o Webpack, podemos notar que o Vite ao contrário do Webpack, não criar bundles gigantes no ambiente de desenvolvimento.

Exemplo prático

Digamos que você está acessando uma rota de login que carrega o arquivo apresentado na Figura 1. Ao receber a requisição para o carregamento da página na rota de login, o Vite verifica quais os arquivos estão associados a essa página, nesse exemplo será o componente login.vue. Dando continuidade, será obtida todas as dependências associadas a esse arquivo, que nesse caso vai ser a importação da biblioteca lodash, login.js e login.css, nesse ponto esse processo de busca de dependências será repetido recursivamente até que não existam mais dependências a serem carregadas, formando assim a árvore de dependências para a página em específico.

Após a criação da árvore, para cada arquivo de dependência será realizada uma requisição para o servidor. O servidor do Vite retorna os arquivos transpilados legível para o browserou um código 304 caso esse arquivo não tenha sido modificado e esteja no cache do browser, indicando que ele foi carregado anteriormente. Isso faz com que a quantidade de dados enviados pelo servidor de desenvolvimento seja reduzida drasticamente já que o servidor só precisa enviar arquivos modificados para o browser o que é facilitado pelo fato da não produção bundles. Então, se por exemplo, você modifica o arquivo login.js, por ele não estar em um bundle com outros arquivos , não existe a necessidade de transpilar tudo novamente, apenas será enviado o login.js, isso é chamado de HMR (hot module replacement) que é quando o servidor precisa modificar apenas os módulos que foram alterados pelo usuário.

Um outro comportamento do Vite, que também acelera muito o processo de reload, é o recarregamento, apenas, das dependências utilizadas pela página corrente Então, se houver, por exemplo, um componente login.vue que possui dependência com lodash e outra página empresas.vue que possui a dependência com axios, ao atualizar a página de login apenas os arquivos associados a essa pagina atualizaram.

Colocando a mão na massa

Para iniciar um projeto é muito simples. Você vai precisar do Node.js e o NPM instalados na sua máquina, e executar o comando npm init vite ou npm create vite@last para obter a versão mais recente.

Digite o nome do projeto:

Selecione o Framework que você deseja trabalhar, no caso desse artigo vamos utilizar o Vue:

Além da forma padrão de se trabalhar com Vue utilizando Javascript, o Vite fornece a possibilidade de criar o projeto com o suporte ao Typescript já configurado. Nesse artigo não vamos utilizar TypeScript, então selecione a opção Javascript

Após isso você pode executar os seguintes comandos para rodar o servidor de desenvolvimento do vite:

Como exemplo de uso vamos utilizar o tailwindcss dentro do projeto projeto (guia de instalação). Primeiramente execute os comandos abaixo na pasta do projeto para instalar e inicializar o tailwind.

Modifique o conteúdo do arquivo tailwind.config.js para o conteúdo abaixo, isso é feito para o tailwind conseguir mapear os arquivos:

Agora dentro do projeto vamos criar uma pasta index.css com o seguinte conteúdo:

Após isso é só importar o arquivo index.css dentro do arquivo src/main.js.

Agora você já pode ter o tailwind disponível para utilização sem precisar fazer nenhuma configuração extra. Vamos fazer um teste rápido alterando o arquivo App.vue para o seguinte conteúdo:

Agora é só executar o comando npm run dev e você deve ver o seguinte resultado:

Isso pode ser feito com diferentes pacotes javascript, por exemplo, você pode instalar o pacote sass e ter suporte a sass sem precisar configurar nada, ou instalar o react e react-dom e ter suporte para o react. Arquivos .sass ou .jsx vão ser transpilados automaticamente pelo Vite se eles estiverem sendo importados no seu projeto.

Pontos fortes

• O tempo de build, reload e inicialização do dev sever do em comparação com o Webpack em um projeto novo pode chegar a ser 5x mais rápido e essa diferença só tende a aumentar à medida que o projeto cresce.

Comparativo

• A complexibilidade de configuração do Vite em relação ao Webpack é menor, já que para realizar algumas tarefas o Webpack precisa de plugins e ajustes de configuração e o Vite já vem pré-configurado com as consideradas boas práticas da comunidade.

• Não depende de nenhum framework ou plataforma para funcionar, então ele pode ser usado tanto para desenvolver com Vue quanto para React, por exemplo.

• Possui suporte por padrão para TypeScript e a transpiração de formatos comuns como .css, .jsx (React), .tsx (React), .vue (Vue.js).

Pontos fracos

• Devido a sua limitação de só suportar ES modules ele apenas possui compatibilidade com browsers que possuem suporte para ES modules, que felizmente são a maioria dos browsers modernos, da mesma forma código que que não foi escrito nesse formato não pode ser usado dentro do Vite, por enquanto.

• Ainda não possui bom suporte para SSR (server side rendering), a configuração desse tipo de funcionalidade pode ser um pouco difícil, então no caso de você querer utilizar SSR é mais recomendável usar frameworks como Nuxt(vuejs) ou Next (React).

• Não possui suporte para pacotes que estão hospedados externamente, sem usar npm ou yarn install, pois ele não faz o fetch desses pacotes.

Conclusão

O Vite é uma ótima ferramenta para desenvolvedores que querem uma velocidade maior na hora de inicializar o servidor de desenvolvimento e de recarregar o código após alguma modificação, ele possui um sistema de build que torna fácil a adição de pacotes bem conhecidos pela comunidade frontend, apesar de ser um pacote relativamente novo, ele se mostra promissor no seu escopo de ser simples, fácil de usar e rápido, e é uma boa alternativa para os usuários do Webpack e outras ferramentas de bundler que não utilizam o sistema de plugins e não mexem com configurações em menor nível do pacote.

Referências

https://harlanzw.com/blog/how-the-heck-does-vite-work/#understanding-webpack
https://dev.to/lixeletto/vite-js-o-build-tool-que-vai-facilitar-a-sua-vida-15ho
https://vitejs.dev/guide/why.html
Podcast com o criador do Vite — https://www.youtube.com/watch?v=UJypSr8IhKY&ab_channel=GitHub

Texto: João Batista Gomes Silva (DEV)