Tire 187 KB de CSS da AG Grid do caminho crítico de cada rota

Performancekamo-internal
Shipped
26 de agosto de 2026 às 02:11 UTC
Author
kamo
Commit
65eed6d

Lote 4 da auditoria de desempenho do lado do cliente, e o último dos grandes. app/globals.css aberto com duas @importações das folhas de estilo do ag-grid, e o layout root importações globals.css — por isso 187 KB de grade CSS sentou-se no <head> de todas as 143 rotas e primeira pintura bloqueada em cada um deles, incluindo /validate e /logout. Folhas de estilo são o único recurso neste aplicativo que genuinamente render-block, que fez com que este o maior item FCP na auditoria e precisamente o que PageSpeed relata em "Eliminar recursos de bloqueio de renderização". A entrada CSS do layout cai de 334 KB para 147 KB. As importações mudam-se para uma embalagem que reexporta AgGridReact inalterado, e todos os 34 módulos que importaram ag-grid-react agora passam por Ele. Uma embalagem em vez de 34 importações de folha de estilo dispersas porque a 35a grade é o um que enviaria sem tema — uma falha que se parece com um bug CSS em um recurso ninguém Tocado. scripts/check-aggrid-import.mjs obriga-o e é executado no teste npm. O CASCADE, que é a parte que precisava provar em vez de afirmar. globals.css agora carrega ANTES de ag-grid em vez de depois, então cada igual-específica ligação entre Ag-grid e Tailwind pré-voo flips: pré-voo usado para vencê-los, ag-grid agora faz. Auditado exaustivamente com css-tree sobre ambas as folhas de estilo em vez de por olho: - [escondido] é (0,2,0) e ainda é superior a todas as regras de 'display' de 167 ag-grid em (0,1,0), para que nada oculto se torne visível. O preflight's [role="botão"] dá-lhes — esses laços são no-ops. O especialista codificadores (ew-resize, grab, move, cell) sentam-se ao redimensionar e arrastam cabos que carregam nem [role="botão"] nem :disabled. - Todos os 20 arquivos do próprio .ag-theme-alpine são totalmente importantes ou (0,3,0)+, então eles são independentes de ordem de qualquer forma. - cinco regras de elementos nus de ag-grid são <ag-grid-angular> e amigos, nomes de elementos este aplicativo nunca renderiza, além de uma propriedade personalizada corpo pré-voo não define. Um verdadeiro flip: navios ag-grid `[classe^=ag-] { esboço: nenhum }` e navios pré-voo `:-moz-focusing { deline: auto }`, ambos (0,1,0), então os usuários do Firefox teriam perdido o anel de foco do teclado dentro de cada grade. globals.css pinos que um explicitamente em (0,2,0) então ele bate tanto independentemente da ordem e o valor calculado é exatamente o que era. Também neste lote: público/ é servido com `Cache-Control: público, max-age=0`, então todos os 24 MB de ícones, ringtones, logos e o trabalhador do pdf foram revalidados em cada carga dura. Agora uma hora. sem revalidação — deliberadamente não «imutável» nem um ano, porque nada sob public/ é conteúdo-hashed do modo / next/static é, então um arquivo substituído por um implante mantém sua URL e `immutável` iria fixar os bytes antigos sem nenhuma maneira Para o destruir. A plataforma de lançamento. Esses três sites de chamadas passam pela próxima / imagem, que serve um WebP tamanho de alguns KB. O arquivo mestre é deixado sozinho: CopilotHero renderiza o mesmo ativo em 148 CSS px e precisa dele. Verificado: alvo tsc --noEmite limpar sobre o invólucro, ambos os locais de chamada de imagem/próximo e uma amostra dos módulos da rede reescrita com as suas importações transitivas; todos os 9 guardas os scripts passam, incluindo o novo, que foi confirmado para falhar em um importar antes de ser ligado.

All changes

Como o que vês no transporte?

Cada uma dessas atualizações pousa automaticamente em seu espaço de trabalho. Comece grátis e veja crescer semana após semana.

Começar Livre Para SempreVer Preços