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.
Para conferir 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 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.
Depois, acesse Settings no seu perfil, clique no botão Sync account e confira 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 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.
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 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.
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 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.
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.
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.
Clique no botão Ferramentas.
Em seguida, clique no botão Console. O console será aberto em outra guia.
No console, digite
webpacke aguarde a conclusão do build.Exporte o código para o GitHub em Ferramentas > Git, Importar e Exportar > Exportar para o 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 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.