Quais ferramentas usar para acompanhar e analisar o pacote do webpack
Mesmo ao configurar o webpack para deixar o app o menor possível, ainda é importante acompanhá-lo e saber o que ele inclui. Caso contrário, você pode instalar uma dependência que tornará o app duas vezes maior e nem vai perceber.
Esta seção descreve ferramentas que ajudam você a entender seu pacote.
Monitore o tamanho do pacote
Para monitorar o tamanho do app, use o webpack-dashboard durante o desenvolvimento e o bundlesize na CI.
painel do webpack
O webpack-dashboard melhora a saída do webpack com tamanhos de dependências, progresso e outros detalhes. Veja o resultado:
Esse painel ajuda a rastrear grandes dependências. Se você adicionar uma, ela será mostrada imediatamente na seção Módulos.
Para ativá-la, instale o pacote webpack-dashboard
:
npm install webpack-dashboard --save-dev
E adicione o plug-in à seção plugins
da configuração:
// webpack.config.js
const DashboardPlugin = require('webpack-dashboard/plugin');
module.exports = {
plugins: [
new DashboardPlugin(),
],
};
ou compiler.apply()
se estiver utilizando um servidor de desenvolvimento baseado no Express:
compiler.apply(new DashboardPlugin());
Sinta-se à vontade para testar o painel de controle e encontrar possíveis pontos de melhoria! Por exemplo, role a seção Modules para ver quais bibliotecas são muito grandes e podem ser substituídas por alternativas menores.
tamanho do pacote
O bundlesize verifica se os recursos do webpack não excedem os tamanhos especificados. Integre-o a uma CI para receber notificações quando o app ficar muito grande:
Para configurá-lo, faça o seguinte:
Descobrir os tamanhos máximos
Otimizar o app para reduzir o tamanho o máximo possível. Execute o build de produção.
Adicione a seção
bundlesize
apackage.json
com o seguinte conteúdo:// package.json { "bundlesize": [ { "path": "./dist/*" } ] }
Execute
bundlesize
com npx:npx bundlesize
O tamanho gzip de cada arquivo será impresso:
PASS ./dist/icon256.6168aaac8461862eab7a.png: 10.89KB PASS ./dist/icon512.c3e073a4100bd0c28a86.png: 13.1KB PASS ./dist/main.0c8b617dfc40c2827ae3.js: 16.28KB PASS ./dist/vendor.ff9f7ea865884e6a84c8.js: 31.49KB
Adicione de 10 a 20% a cada tamanho para ter os tamanhos máximos. Essa margem de 10% a 20% permite que você desenvolva o app normalmente, além de avisar quando o tamanho dele crescer demais.
Ativar
bundlesize
Instale o pacote
bundlesize
como uma dependência de desenvolvimento:npm install bundlesize --save-dev
Na seção
bundlesize
empackage.json
, especifique os tamanhos máximos concretos. Para alguns arquivos (por exemplo, imagens), é possível especificar o tamanho máximo por tipo de arquivo, não por cada arquivo:// package.json { "bundlesize": [ { "path": "./dist/*.png", "maxSize": "16 kB", }, { "path": "./dist/main.*.js", "maxSize": "20 kB", }, { "path": "./dist/vendor.*.js", "maxSize": "35 kB", } ] }
Adicione um script npm para executar a verificação:
// package.json { "scripts": { "check-size": "bundlesize" } }
Configure a CI para executar
npm run check-size
em cada push. E integre obundlesize
ao GitHub, se você estiver desenvolvendo o projeto nele.
Pronto! Agora, se você executar npm run check-size
ou enviar o código por push, verá se os arquivos de saída são
pequenos o suficiente:
Ou, em caso de falhas:
Leia mais
- Alex Russell sobre o tempo de carregamento real que devemos projetar.
Analisar por que o pacote é tão grande
Você pode se aprofundar no pacote para ver quais módulos ocupam espaço nele. Conheça o webpack-bundle-analyzer (link em inglês):
O webpack-bundle-analyzer verifica o pacote e cria uma visualização do conteúdo dele. Use essa visualização para encontrar dependências grandes ou desnecessárias.
Para usar o analisador, instale o pacote webpack-bundle-analyzer
:
npm install webpack-bundle-analyzer --save-dev
Adicione um plug-in à configuração do webpack:
// webpack.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
plugins: [
new BundleAnalyzerPlugin(),
],
};
e executar o build de produção. O plug-in abrirá a página de estatísticas em um navegador.
Por padrão, a página de estatísticas mostra o tamanho dos arquivos analisados (ou seja, da forma como aparecem no pacote). É recomendável comparar os tamanhos do gzip, já que eles são mais próximos da experiência dos usuários. Use a barra lateral à esquerda para alterar os tamanhos.
Veja o que procurar no relatório:
- Dependências grandes. Por que eles são tão grandes? Há alternativas menores (por exemplo, agir em vez do React)? Você usa todo o código que ele inclui (por exemplo, O Moment.js inclui muitas localidades que não são usadas com frequência e podem ser descartadas?
- Dependências duplicadas. Você vê a mesma biblioteca repetindo em vários arquivos? Use, por exemplo,
a opção
optimization.splitChunks.chunks
no webpack 4 ou aCommonsChunkPlugin
no webpack 3 para movê-la para um arquivo comum. Ou o pacote tem várias versões da mesma biblioteca? - Dependências semelhantes. Existem bibliotecas semelhantes que fazem aproximadamente o mesmo trabalho? Por exemplo,
moment
edate-fns
oulodash
elodash-es
. Tente usar uma única ferramenta.
Confira também a ótima análise de pacotes de webpacks de Sean Larkin.
Resumo
- Use
webpack-dashboard
ebundlesize
para acompanhar o tamanho do app - Veja o que aumenta o tamanho com o
webpack-bundle-analyzer