Monitorar e analisar o app

Quais ferramentas usar para acompanhar e analisar o pacote do webpack

Mesmo que você configure o Webpack para tornar o app o menor possível, ainda é importante acompanhar e saber o que ele inclui. Caso contrário, você pode instalar uma dependência que vai aumentar o app em dobro, sem que você perceba.

Esta seção descreve as ferramentas que ajudam você a entender seu pacote.

Acompanhar o tamanho do pacote

Para monitorar o tamanho do seu app, use webpack-dashboard durante o desenvolvimento e bundlesize em CI.

webpack-dashboard

O webpack-dashboard melhora a saída do webpack com tamanhos de dependências, progresso e outros detalhes. Confira como fica:

Captura de tela da saída do webpack-dashboard

Esse painel ajuda a acompanhar dependências grandes. Se você adicionar uma, ela vai aparecer imediatamente na seção Módulos.

Para ativar, 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 use compiler.apply() se 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 a seção Modules para encontrar quais bibliotecas são muito grandes e podem ser substituídas por alternativas menores.

bundlesize

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:

Captura de tela da seção de CI de uma solicitação de envio no GitHub. Entre
as ferramentas de CI, há a saída Bundlesize

Para configurar:

Saiba quais são 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 a 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 10 a 20% a cada tamanho para encontrar os tamanhos máximos. Essa margem de 10% a 20% permite que você desenvolva o app normalmente e avise 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 do package.json, especifique os tamanhos máximos de concreto. Para alguns arquivos (por exemplo, imagens), talvez seja melhor especificar o tamanho máximo por tipo de arquivo, não por 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 o 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, vai ver se os arquivos de saída são pequenos o suficiente:

Captura de tela da saída de bundlesize. Todos os resultados
de build são marcados como "Pass"

Ou, em caso de falhas:

Captura de tela da saída de bundlesize. Alguns resultados
de build são marcados como "Falha".

Leitura adicional

Analisar por que o pacote é tão grande

Talvez você queira se aprofundar no pacote para saber quais módulos ocupam espaço nele. Conheça o webpack-bundle-analyzer:

(gravação de tela de github.com/webpack-contrib/webpack-bundle-analyzer)

O webpack-bundle-analyzer verifica o pacote e cria uma visualização do que está dentro 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 vai 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 aparecem no pacote). Você provavelmente vai querer comparar os tamanhos de gzip, já que isso é mais próximo da experiência de usuários reais. Use a barra lateral à esquerda para alterar os tamanhos.

Confira o que procurar no relatório:

  • Dependências grandes. Por que elas são tão grandes? Existem alternativas menores (por exemplo, Preact em vez de React)? Você usa todo o código incluído (por exemplo, O Moment.js inclui muitas localidades que geralmente não são usadas e podem ser descartadas?
  • Dependências duplicadas. Você vê a mesma biblioteca repetida em vários arquivos? Use, por exemplo, a opção optimization.splitChunks.chunks (no webpack 4) ou 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. Há bibliotecas semelhantes que fazem aproximadamente o mesmo trabalho? Por exemplo, moment e date-fns ou lodash e lodash-es. Tente usar apenas uma ferramenta.

Confira também a ótima análise de pacotes do webpack de Sean Larkin.

Resumo

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