O uso de bundlesize com o Travis CI permite definir orçamentos de desempenho 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 de tamanho com a ramificação principal e um aviso em caso de um grande salto no tamanho.
Para conferir isso em ação, confira um app empacotado com o webpack que permite votar no seu gatinho favorito.
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 do 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 este 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.
Depois de criar uma conta, acesse Settings no seu perfil, clique no botão Sync account e verifique se o novo repositório está listado no Travis.
Autorizar o bundlesize para postar em solicitações de envio
O Bundlesize precisa de autorização para postar em solicitações de pull. Acesse este link para receber o token bundlesize que será armazenado na configuração do Travis.
No painel do Travis do seu projeto, acesse More options > Settings > Environment variables.
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 o 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.
No Glitch, clique em Ferramentas > Git, Importar e Exportar > Exportar para o GitHub.
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".Crie uma nova solicitação de envio clicando no botão New pull request 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.
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 desempenho. O pacote principal tem 266 KB e o orçamento é de 170 KB.
Otimizar
Felizmente, há algumas vitórias de desempenho fáceis que você pode fazer
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 o Firebase Realtime Database para armazenar os dados, mas está importando o pacote do Firebase completo, 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.
Clique no botão Ferramentas.
Em seguida, clique no botão Console. O console será aberto em outra guia.
No console, digite
webpack
e aguarde a conclusão do build.Exporte o código para o GitHub em Tools > Git, Import and Export > Export to GitHub.
Acesse a página da solicitação de envio 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 está dentro do orçamento, e tudo está bem. O Travis CI e o bundlesize vão continuar monitorando o orçamento de performance para você, garantindo que o app continue rápido.