Quais ferramentas usar para acompanhar e analisar o pacote do webpack
Mesmo ao configurar o webpack para diminuir o tamanho do aplicativo o máximo possível, é importante manter monitorá-lo e saber o que ele inclui. Caso contrário, é possível instalar uma dependência que deixará a duas vezes maior – e nem vai perceber!
Esta seção descreve ferramentas que ajudam você a entender seu pacote.
Acompanhe o tamanho do pacote
Para monitorar o tamanho do seu app, use webpack-dashboard durante o desenvolvimento e bundlesize em CI.
webpack-dashboard
webpack-dashboard aprimora a saída do webpack. com tamanhos de dependências, progresso e outros detalhes. Confira como vai ficar:
Esse painel ajuda a monitorar dependências grandes. Se você adicionar uma, ela será imediatamente exibida em a seção Modules.
Para ativá-lo, instale o pacote webpack-dashboard
:
npm install webpack-dashboard --save-dev
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 usando compiler.apply()
se você estiver usando um servidor de desenvolvimento baseado no Express:
compiler.apply(new DashboardPlugin());
Fique à vontade para brincar com o painel e encontrar prováveis pontos de melhoria. Por exemplo: role pela seção Modules para descobrir quais bibliotecas são muito grandes e podem ser substituídas por; alternativas menores.
tamanho do pacote
bundlesize verifica se os recursos do webpack não excedem os tamanhos especificados. Integre-o a uma CI para receber uma notificação quando o app ficar grande demais:
Para configurar:
Descobrir os tamanhos máximos
Otimizar o app para que ele fique o menor possível. Execute o build de produção.
Adicione a seção
bundlesize
aopackage.json
com o seguinte: conteúdo:// package.json { "bundlesize": [ { "path": "./dist/*" } ] }
Execute
bundlesize
com npx:npx bundlesize
Isso imprimirá o tamanho compactado em gzip de cada arquivo:
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 conseguir o tamanho máximo. Essa margem de 10 a 20% permitiria desenvolver o app como de costume, avisando quando o tamanho aumentar demais.
Ativar
bundlesize
Instale o pacote
bundlesize
como uma dependência de desenvolvimento:npm install bundlesize --save-dev
Na seção
bundlesize
nopackage.json
, especifique o material tamanhos máximos. Para alguns arquivos (por exemplo, imagens), é possível especificar o tamanho máximo por 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 de 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, vai ver se os arquivos de saída estão
pequena o suficiente:
Ou, em caso de falhas:
Leitura adicional
Analisar por que o pacote é tão grande
Convém verificar mais detalhes do pacote para ver quais módulos ocupam espaço nele. Conheça webpack-bundle-analyzer:
O webpack-bundle-analyzer verifica o pacote e cria uma visualização do conteúdo dele. Usar 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, dos arquivos conforme eles aparecem) do pacote). Você provavelmente vai querer comparar os tamanhos de gzip, já que ele é mais próximo do que os usuários reais experiência use a barra lateral à esquerda para alterar os tamanhos.
O que procurar no relatório:
- Dependências grandes. Por que eles são tão grandes? Existem alternativas menores (por exemplo, Pré-ação em vez do React)? Você usa todo o código incluído (por exemplo, O Moment.js inclui várias localidades que não são usados com frequência e podem ser descartados)?
- Dependências duplicadas. A mesma biblioteca aparece em vários arquivos? Use, por exemplo,
a opção
optimization.splitChunks.chunks
(no webpack 4) ou aCommonsChunkPlugin
– no webpack 3 – para movê-lo 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.
Além disso, confira a ótima análise de Webpack de Sean Larkin pacotes.
Resumo
- Use
webpack-dashboard
ebundlesize
para acompanhar o tamanho do seu app - Descubra o que aumenta o tamanho com o
webpack-bundle-analyzer