Rodrigo Brito

Compactando e otimizando o JavaScript

Para este exemplo, será utilizado o conteúdo do projeto prático. Caso queira o montar em seu ambiente de desenvolvimento, leia o conteúdo do JS-0302 - JavaScript Completo ES6 - Início do Projeto Prático.

Para baixar o projeto, clique aqui.

O Webpack é um "bundler", empacotador, que serve para agrupar vários arquivos em um único, em um processo de compressão e otimização. Serve tanto para o JS, quanto para outros tipos de extensão. Informações detalhadas sobre a ferramenta podem ser vistas no link https://webpack.js.org.

A ferramenta é altamente configurável. Para reduzir a complexidade proporcional às possibilidades de arranjos e seu ambiente (Node.js) no projeto serão utilizadas configurações mínimas que resultarão no  esperado,  a junção de todos os módulos de script em um único arquivo leve e funcional.

Para a instalação, no diretório da aplicação, através do npm, utiliza-se o seguinte comando via terminal:

$ npm install --save-dev webpack webpack-cli

É importante a existência do arquivo package.json. Caso não tenha utilizado ainda, é interessante conhecer se familiarizar com a utilização deste. Neste projeto utilizei o ESLint, outra ferramenta extremamente útil para a padronização do JavaScript.

Os dois pacotes serão incluídos nas dependências de desenvolvimento:

Com o Webpack instalado, poderemos utilizar o comando npx para a execução, passando o caminho do arquivo principal e o seu destino, definindo o modo de desenvolvimento (--mode development) para gerar um arquivo sem a compactação, ou o modo produção (--mode production) para o arquivo final. No modo desenvolvimento ainda pode ser definida a opção "--watch" para o webpack "rodar" a cada alteração de script. Por padrão, o modo production é o executado, não necessitando ser passado em linha de comando:

$ npx webpack --entry ./js/script.js -o ./

Para o modo de desenvolvimento:

npx webpack --mode development --entry ./js/script.js -o ./

O resultado deste comando é o arquivo "main.js" na raiz do projeto, com o código todo compactado e otimizado (redução e unificação de variáveis, espaços, acentos etc.), que poderá ser linkado no html, agora sem o type modules:

O arquivo base para a execução do Webpack é o script.js. Qualquer importação existente neste arquivo será utilizada no processo, podendo ser bibliotecas externas, tal como o jQuery por exemplo. Há ainda a opção de configurar a execução automática do Webpack no script do package.json, existente em alguns frameworks, tal como o Laravel com o seu comando "npm run dev" e "npm run production".

Agora, referenciando este no HTML, o peso de carregamento cai de 9,35KB para 4,37KB, reduzindo mais da metade o tamanho do arquivo, resultando assim em uma melhor performance.

Antes com 9,35KB e quatorze requisições de scripts:

Depois, com 4,72KB e uma requisição de script:

Para baixar o projeto, clique aqui.

Para visualizar o projeto, clique aqui.