Monitorar e analisar o app

Quais ferramentas usar para acompanhar e analisar o pacote do webpack

Ivan Akulov

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

1. Otimizar o app para que ele fique o menor possível. Execute o build de produção.

2. Adicione a seção bundlesize ao package.json com o seguinte: conteúdo:

   // package.json
   {
     "bundlesize": [
       {
         "path": "./dist/*"
       }
     ]
   }
   

3. 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
   

4. 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

5. Instale o pacote bundlesize como uma dependência de desenvolvimento:

   npm install bundlesize --save-dev
   

6. Na seção bundlesize no package.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",
       }
     ]
   }   
   

7. Adicione um script de npm para executar a verificação:

   // package.json
   {
     "scripts": {
       "check-size": "bundlesize"
     }
   }
   

8. Configure a CI para executar npm run check-size em cada push. (E integre o bundlesize 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

• Alex Russell sobre o tempo de carregamento real que devemos destino

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 a CommonsChunkPlugin – 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 e date-fns ou lodash e lodash-es.) Tente usar uma única ferramenta.

Além disso, confira a ótima análise de Webpack de Sean Larkin pacotes.

Resumo

• Use webpack-dashboard e bundlesize para acompanhar o tamanho do seu app
• Descubra o que aumenta o tamanho com o webpack-bundle-analyzer