Como usar o bundlesize com o Travis CI

O uso de bundlesize com o Travis CI permite definir orçamentos de performance com configuração mínima e aplicá-los como parte do fluxo de trabalho de desenvolvimento. O Travis CI é um serviço que executa testes no seu app na nuvem sempre que você envia código para o GitHub. É possível configurar seu repositório para que ele não permita mesclar solicitações de pull, a menos que os testes de tamanho de pacote tenham sido aprovados.

As verificações do Bundlesize no GitHub incluem uma comparação do tamanho com a ramificação principal e um aviso em caso de um grande aumento de tamanho.

Verificação do tamanho do pacote no GitHub

Para conferir em ação, confira um app empacotado com o webpack que permite votar no seu gatinho favorito.

App de votação para gatos

Definir o orçamento de performance

This Glitch já contém bundlesize.

  • Clique em Remix to Edit para tornar o projeto editável.

O pacote principal deste app está na pasta pública. Para testar o tamanho, adicione a seguinte seção ao arquivo package.json:

"bundlesize": [
  {
    "path": "./public/*.bundle.js",
    "maxSize": "170 kB"
  }
]

Para manter o tamanho do pacote JavaScript compactado abaixo do limite recomendado, defina o orçamento de performance como 170 KB no campo maxSize.

O Bundlesize oferece suporte a padrões glob, e o caractere curinga * no caminho do arquivo vai corresponder a todos os nomes de pacotes na pasta pública.

Criar um script de teste

Como o Travis precisa de um teste para ser executado, adicione um script de teste a package.json:

"scripts": {
  "start": "webpack && http-server -c-1",
  "test": "bundlesize"
}

Definir integração contínua

Integrar o GitHub e o Travis CI

Primeiro, crie um novo repositório para esse projeto na sua conta do GitHub e inicialize-o com um README.md.

Você vai precisar registrar uma conta no Travis e ativar a integração do GitHub Apps na seção "Configurações" do seu perfil.

Integração de apps do GitHub no Travis CI

Depois, acesse Settings no seu perfil, clique no botão Sync account e confira se o novo repositório está listado no Travis.

Botão "Travis CI Sync"

Autorizar o bundlesize para postar em solicitações de envio

O Bundlesize precisa de autorização para publicar solicitações de envio, então acesse este link para ver o token de tamanho do pacote que será armazenado na configuração do Travis.

token de tamanho de pacote

No painel do Travis do seu projeto, acesse Mais opções > Configurações > Variáveis de ambiente.

Como adicionar variáveis de ambiente no Travis CI

Adicione uma nova variável de ambiente com o token como o campo de valor e BUNDLESIZE_GITHUB_TOKEN como o nome.

A última coisa que você precisa para iniciar a integração contínua é um arquivo .travis.yml, que informa ao Travis CI o que fazer. Para acelerar as coisas, ele já está incluído no projeto e especifica que o app está usando o NodeJS.

Com essa etapa, você está pronto, e o bundlesize vai avisar se o JavaScript ultrapassar o orçamento. Mesmo que você comece bem, com o tempo, à medida que novos recursos são adicionados, os kilobytes podem se acumular. Com o monitoramento automatizado do orçamento de performance, você pode ficar tranquilo sabendo que ele não vai passar despercebido.

Faça um teste

Acionar seu primeiro teste de tamanho de pacote

Para saber como o app se compara ao orçamento de performance, adicione o código ao repositório do GitHub que você criou na etapa 3.

  1. No Glitch, clique em Ferramentas > Git, Importar e Exportar > Exportar para o GitHub.

  2. No pop-up, digite seu nome de usuário do GitHub e o nome do repositório como username/repo. O Glitch vai exportar seu app para uma nova ramificação chamada "glitch".

  3. Crie uma nova solicitação de envio clicando no botão Nova solicitação de envio na página inicial do repositório.

Agora você vai ver as verificações de status em andamento na página de solicitação de pull.

Verificações do GitHub em andamento

Não vai demorar muito até que todas as verificações sejam concluídas. Infelizmente, o app de votação de gatos está um pouco inchado e não passa na verificação do orçamento de performance. O pacote principal tem 266 KB e o orçamento é de 170 KB.

Falha na verificação do tamanho do pacote

Otimizar

Felizmente, há algumas vitórias de desempenho fáceis que você pode alcançar removendo o código não utilizado. Há duas importações principais em src/index.js:

import firebase from "firebase";
import * as moment from 'moment';

O app usa o Firebase Realtime Database para armazenar os dados, mas está importando o pacote inteiro do Firebase, que consiste em muito mais do que apenas um banco de dados (autenticação, armazenamento, mensagens etc.).

Corrija isso importando apenas o pacote necessário para o app no arquivo src/index.js:

import firebase from "firebase";
import firebase from 'firebase/app';
import 'firebase/database';

Executar o teste novamente

Como o arquivo de origem foi atualizado, é necessário executar o webpack para criar o novo arquivo de pacote.

  1. Clique no botão Ferramentas.

  2. Em seguida, clique no botão Console. O console será aberto em outra guia.

  3. No console, digite webpack e aguarde a conclusão do build.

  4. Exporte o código para o GitHub em Ferramentas > Git, Importar e Exportar > Exportar para o GitHub.

  5. Acesse a página da solicitação de envio no GitHub e aguarde a conclusão de todas as verificações.

Aprovado na verificação de tamanho de pacote

Pronto. O novo tamanho do pacote é de 125,5 KB, e todas as verificações foram aprovadas. 🎉

Ao contrário do Firebase, a importação de partes da biblioteca Moment não pode ser feita com tanta facilidade, mas vale a pena tentar. Confira como otimizar ainda mais o app no codelab Remove unused code.

Monitoramento

O app está dentro do orçamento, e tudo está bem. O Travis CI e o bundlesize continuam monitorando o orçamento de performance para você, garantindo que o app continue rápido.