Size Limit aplica orçamentos de performance em JavaScript no CI
O que é
O Size Limit é uma ferramenta de orçamento de performance para JavaScript. Ele verifica cada commit no CI, calcula o custo real do JS para o usuário final e gera erro quando esse custo ultrapassa o limite definido. Segundo a documentação, o objetivo é identificar se um pull request adiciona uma dependência muito grande. Ele suporta suporte a módulos ES e tree-shaking, e pode ser usado com GitHub Actions, Circle CI ou outro sistema de CI.
Como funciona
A ferramenta tem uma CLI que encontra plugins no package.json e carrega a configuração. Há três plugins: file, webpack e time. O plugin webpack empacota os arquivos JS em um único arquivo, incluindo dependências e polyfills, o que também é útil para bibliotecas pequenas com muitos arquivos. O plugin time compara o desempenho da máquina atual com o de um Android de baixo custo para calcular a taxa de limitação de CPU, e depois executa o Chrome headless para medir o tempo de compilação e execução do JS.
A documentação afirma que essas medições dependem dos recursos disponíveis e podem ser instáveis. Por isso, o tempo é apresentado como métrica mais compreensível que bytes para aplicações grandes, mas a própria ferramenta reconhece a variação.
Presets e configuração
Há três presets para casos de uso distintos. O preset app é indicado para aplicações com bundler próprio, que enviam o JS diretamente ao cliente. O preset big-lib, para bibliotecas acima de 10 kB, inclui medição de tempo de execução. O preset small-lib mede apenas o tamanho, para bibliotecas menores que 10 kB. Em todos os casos, o texto recomenda definir o limite a partir do valor atual, por exemplo somando 25% ao total medido no preset app e big-lib, ou adicionando um pequeno acréscimo no preset small-lib.
O limite pode ser definido no package.json, em um arquivo .size-limit.json, em .size-limit.js/.cjs ou em .size-limit.ts. As opções incluem path, import para testar tree-shaking, limit, compressão (Brotli por padrão, Gzip ou sem compressão), ignore e opções específicas de cada bundler. Para análise de causas, a opção --why gera relatórios com o custo das dependências internas, usando o Statoscope nos plugins de bundler.
Relatórios e ressalvas
Com a GitHub Action, a ferramenta comenta no pull request as variações de tamanho e pode bloquear a mesclagem. A página também indica ressalvas práticas: para rastrear CSS, é preciso desativar o webpack, senão o runtime do style-loader (cerca de 2 kB) distorce os números. Em workspaces que constroem apenas projetos alterados, a flag --ignore-missing evita falhas por caminhos ausentes.
A página cita ganhos relatados por projetos como Autoprefixer, PostCSS, nanoid e Logux, com reduções de 25% a 90% no tamanho, mas esses números são apresentados pela própria documentação e não foram verificados de forma independente.
O Size Limit é desenvolvido pela Evil Martians, consultoria de design e engenharia, e está licenciado sob MIT.