Como usar o bundlesize com o Travis CI

Milica Mihajlija

O uso do 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 para seu app na nuvem sempre que você envia código para o GitHub. É possível configurar o repositório para que ele não permita a mesclagem de solicitações de envio, a menos que os testes de bundlesize tenham sido aprovados.

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

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

Definir o montante de desempenho

Este Glitch já contém o bundlesize.

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

O pacote principal desse app está na pasta pública. Para testar o tamanho, adicione a seção a seguir 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 montante de desempenho 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 pacote na pasta pública folder.

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ê precisará registrar uma conta no Travis e ativar a integração do GitHub Apps na seção "Configurações" do seu perfil.

Depois de criar uma conta, acesse Configurações no seu perfil, clique no botão Sincronizar conta e verifique se o novo repositório está listado no Travis.

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

O bundlesize precisa de autorização para postar em solicitações de envio. Acesse este link para receber o token do bundlesize que será armazenado na configuração do Travis.

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

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 necessária 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, tudo está configurado, e o bundlesize vai avisar se o JavaScript exceder o orçamento. Mesmo quando você começa bem, com o tempo, ao adicionar novos recursos, 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 bundlesize

Para conferir como o app se compara ao montante de desempenho, adicione o código ao repositório do GitHub criado na etapa 3.

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

2. No pop-up, insira 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 pull clicando no botão New pull request na página inicial do repositório.

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

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 montante de desempenho. O pacote principal é de 266 KB, e o orçamento é de 170 KB.

Otimizar

Felizmente, há algumas melhorias de performance fáceis que podem ser feitas 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 está usando Firebase Realtime Database para armazenar os dados, mas está importando todo o pacote do Firebase, que consiste em muito mais do que apenas um banco de dados (Auth, armazenamento, mensagens etc.).

Para corrigir isso, importe apenas o pacote de que o app precisa 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. Isso vai abrir o console 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 de solicitação de pull no GitHub e aguarde a conclusão de todas as verificações.

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 Remover código não utilizado.

Monitoramento

O app agora está dentro do orçamento, e tudo está funcionando bem. O Travis CI e o bundlesize vão continuar monitorando o montante de desempenho para você, garantindo que seu app permaneça rápido.