The technique every React Dev should use to measure bundle size in Vite

[Lomanu4]

Tá mexendo em tudo no seu projeto React com Vite: troca lib, muda estratégia, refatora geral… Mas você realmente sabe o que isso tá fazendo com o seu bundle? Ou tá só achando que otimizou?

Hoje eu vou te mostrar como ver isso com seus próprios olhos, usando ferramentas que revelam o peso das suas escolhas e ainda automatizam os testes pra você.

O problema: saber o que mudou de verdade


Você criou uma branch nova, trocou Redux por Zustand, brincou com Tailwind, comparou Headless UI com Radix... Show!

Mas e agora? Será que o código ficou mais leve ou só mais bonito?

Será que alguma lib inchou e você nem percebeu?

Sem medir, é só chute. E chute não escala.

O que você vai aprender hoje?

• Como espiar dentro da sua mochila de códigos pra ver o que tá pesando
• Como testar se seu site é rápido e fácil de usar, igual o Google faz
• Como colocar tudo isso no piloto automático, sem esforço, com ajuda do GitHub

Bora colocar a mão na massa?

1. Espiando o que pesa com o Visualizer


Instalei a lupa (plugin) pra enxergar o que tá no meu bundle:


npm install -D rollup-plugin-visualizer
2. Configurei no vite.config.js


import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { visualizer } from 'rollup-plugin-visualizer';

export default defineConfig({
plugins: [
react(),
visualizer({
filename: './dist/report.html',
template: 'treemap',
gzipSize: true,
brotliSize: true,
})
],
build: {
sourcemap: true
}
});

Depois rodei o build:


npm run build

Agora é só abrir dist/report.html e dar aquela espiada:

• Quais libs estão no seu projeto?
• Qual ocupa mais espaço?
• Tem duplicação? Tem código que você nem usa mais?

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.

? Dica ninja: use o template 'treemap' pra ter uma visão mais clara. O 'raw-data' é cru demais e confunde mais do que ajuda.

2. Automatizando a análise com GitHub Actions


Sabe aquele momento em que você abre um PR e o robô comenta sozinho com um resumo do que mudou no bundle? É isso que vamos fazer.

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.

GitHub Actions é uma ferramenta que você pode usar para criar automações para auxiliar em cada estágio do ciclo de vida de desenvolvimento de software.

Criei um arquivo .github/workflows/bundle-report.yml e coloquei um script que pega os dados do 'Visualizer' e monta a mensagem bonitinha no PR, como segue:


name: Analyze Bundle Size and Lighthouse

on:
pull_request:
branches: [main]

permissions:
pull-requests: write
contents: read

jobs:
analyze-bundle:
runs-on: ubuntu-latest

steps:
- name: Checkout PR branch
uses: actions/checkout@v4
...

Fica assim:

Antes

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.

Depois

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.

3. Testando a performance com o Lighthouse CI


O Lighthouse é tipo aquele professor exigente que analisa seu site e te dá uma nota de desempenho, acessibilidade, SEO e mais.

Aqui, vamos usar o

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.

pra rodar tudo isso no GitHub automaticamente.

Criei um arquivo lighthouserc.js com o seguinte conteúdo na raiz do projeto:


export default {
ci: {
collect: {
url: ['

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.

'],
startServerCommand: 'pnpm run preview',
startServerReadyPattern: 'Local:'
},
upload: {
target: 'temporary-public-storage',
},
assert: {
preset: 'lighthouse:recommended'
},
},
};

Em seguida, criei um novo job no Github Actions file:


lhci:
name: Lighthouse
runs-on: ubuntu-latest

steps:
- name: Checkout PR branch
uses: actions/checkout@v4

- name: Install pnpm
uses: pnpm/action-setup@v4
with:
version: 10
run_install: false

- name: Set up Node.js
uses: actions/setup-node@v4
with:
node-version: 20
cache: "pnpm"

- name: Install dependencies and build
run: |
pnpm install
pnpm run build

- name: run Lighthouse CI
run: |
pnpm install -g @lhci/cli@0.14.x
lhci autorun

Pronto. Toda vez que abrir um PR pra main, o robô vai:

1. Medir o tamanho do bundle
2. Avaliar a qualidade do seu site
3. Te entregar um resumo direto no PR

Conclusão


Não adianta só trocar lib e esperar milagre.

Performance se mede, não se adivinha.

Ferramentas como rollup-plugin-visualizer e Lighthouse CI te dão clareza e controle.

E quando você automatiza com GitHub Actions, vira quase um superpoder.

Ficou com alguma dúvida? Fica à vontade para trocar uma ideia.

Quer ver o resultado final? Comenta aqui 'REPO' que mando o link do repo.

Até mais!

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.