perf: corrigir vazamento do chunk do Recharts + compressão/cache ausentes #21
Loading…
Add table
Add a link
Reference in a new issue
No description provided.
Delete branch "perf/frontend-load-time"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Resumo
Investigando "as páginas estão demorando pra carregar": o chunk do Recharts (~565 KB) não ficava isolado só na rota de Métricas como a documentação afirmava.
manualChunks: { charts: ['recharts'] }(atalho por nome de pacote) deixava o Rollup livre pra decidir onde colocarreact/react-dom(usados em toda página) — e ele colocava os dois dentro do mesmo chunk do Recharts, criando um import estático do bundle principal pro chunk gigante. Toda página baixava esse chunk, não só Métricas.Fix:
manualChunks(id)explícito em vez do atalho — isolareact/react-domemvendor-react, separado decharts— maismodulePreload.resolveDependencies(o Vite ainda injetava<link rel="modulepreload">pro chunk de charts noindex.htmlpor padrão, mesmo sem o import estático).Validação
Com
vite build+vite previewem porta/cache limpos (Docker não disponível neste sandbox, ver nota abaixo) e Resource Timing API:/metricasbaixa os 113 KB (gzip) dechartsOutras 3 causas reais encontradas no caminho
@importdentro do CSS (bloqueia carregamento em série — só começa a baixar a fonte depois do CSS principal terminar) pra<link rel="preconnect">+<link rel="stylesheet">noindex.html.Cache-Control— assets com hash do Vite agora sãoimmutable, max-age=31536000;index.htmlficano-cache(nunca serve versão velha apontando pra assets que um deploy novo removeu).compressno Traefik (compose.yaml), cobrindo API + frontend + docs de uma vez, mesmo padrão de label já usado pro Basic Auth.Test plan
pytestno backend: 37/37 passando (nenhuma mudança de backend)vitestno frontend: 8/8 passandovite buildlimpo, sem warning de chunk >500 KBvite preview+ Resource Timing API que a página inicial não baixa maischarts-*.jse que/metricascontinua funcionando (renderiza os gráficos, sem erros no console)nginx.confe dos labels do Traefik foi revisada com cuidado (mesmo padrão delocation/add_headere do middlewarebasicauthjá existentes), mas vale umdocker compose uplocal antes do deploy pra conferir os headers de verdade comcurl -I.Achado real por trás de "as páginas estão demorando": o chunk do Recharts (~565 KB) não ficava isolado na rota de Métricas como a documentação dizia — manualChunks: { charts: ['recharts'] } (atalho por nome de pacote) deixava o Rollup livre pra decidir onde colocar react/react-dom (usados em toda página), e ele colocava os dois dentro do mesmo chunk do Recharts, criando um import estático do bundle principal pro chunk gigante. Toda página baixava esse chunk, não só Métricas. Corrigido com manualChunks(id) explícito (isola react/react-dom em vendor-react, separado de charts) + modulePreload.resolveDependencies (o Vite ainda injetava <link rel="modulepreload"> pro chunk de charts no index.html por padrão). Validado com vite preview + Resource Timing API em porta/cache limpos: página inicial cai de ~223 KB pra ~64 KB transferidos, e só a rota de Métricas baixa os 113 KB (gzip) de charts. Mais três causas encontradas no caminho, menores mas reais: - Fonte do Google Fonts saía de @import dentro do CSS (bloqueia carregamento em série) pra <link rel="preconnect"> + <link rel="stylesheet"> no index.html, descoberto em paralelo desde o parse do HTML. - nginx do frontend não tinha Cache-Control pros assets com hash do Vite — agora immutable/max-age longo pros hasheados, no-cache pro index.html (pra nunca servir um index.html velho apontando pra assets que sumiram). - Nem Traefik nem nginx comprimiam respostas. Adicionado middleware compress no Traefik (compose.yaml), cobrindo API + frontend + docs de uma vez, no mesmo padrão de label já usado pro Basic Auth. Testado localmente com Docker indisponível neste sandbox (daemon não acessível) — validado via `vite build`/`vite preview` real + inspeção do bundle gerado (grep pela string do chunk, Resource Timing API) em vez de um teste end-to-end do container; a config do nginx/Traefik foi revisada com cuidado mas não rodou dentro de um container de fato. 37/37 testes de backend e 8/8 de frontend passando. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>