Prendere AG Grid 187 KB di CSS dal percorso critico di ogni percorso

Performancekamo-internal
Spegnimento
26 agosto 2026 alle ore 02:11 UTC
Autore
kamo
Impegno
65eed6d

Batch 4 dell'audit delle prestazioni lato cliente, e l'ultimo dei grandi. app/globals.css aperto con due @import di fogli di stile di ag-grid, e il layout root importazioni globals.css — così 187 KB di rete CSS si è seduto nella <head> di tutte le 143 rotte e bloccato prima vernice su ciascuno di loro, tra cui /validate e /logout. Schede di stile sono l'unica risorsa in questa applicazione che effettivamente render-block, che ha reso questo il più grande voce FCP nell'audit e precisamente ciò che PageSpeed riporta sotto "Elimina risorse di render-blocking". L'ingresso del layout CSS scende da 334 KB a 147 KB. Le importazioni si spostano verso l'involucro che riesporta. AgGridReact invariato, e tutti i 34 moduli che hanno importato ag-grid-react ora passare attraverso Ecco. Un wrapper piuttosto che 34 importazioni di fogli di stile sparsi perché la 35a griglia è la uno che spedirebbe inedito — un fallimento che sembra un bug CSS in una caratteristica nessuno toccata. scripts/check-aggrid-import.mjs lo applica e funziona nel test npm. IL CASCADE, che è la parte che ha bisogno di dimostrare piuttosto che affermare. globals.css ora carica BEFORE ag-grid invece di dopo, quindi ogni legame di parità di specificità tra ag-grid e il preflight di Tailwind: preflight usato per vincerli, ag-grid ora lo fa. Audited esaustivamente con cs-tree su entrambi i fogli di stile piuttosto che per occhio: - [nascosto] è (0,2,0) e ancora supera tutte le 167 ag-grid `display` regole a (0,1,0), così nulla nascosto diventa visibile. preflight [role="button"] dà loro — quei legami sono no-ops. La specializzazione coders (ew-resize, grab, move, cell) siedono su ridimensiona e trascina maniglie che trasportano né [role="button] né:disabilitato. - Tutti i 20 di questo file's proprio .ag-theme-alpine overrides sono o completamente!importante o (0,3,0)+, quindi sono indipendenti dall'ordine in entrambi i modi. - le cinque regole degli elementi ag-grid sono <ag-grid-angular> e gli amici, i nomi degli elementi questa applicazione non rende mai, più un preflight di proprietà personalizzato corpo non impostato. Un vero capovolto: ag-grid navi `[class^=ag-] { profilo: nessuna }` e preflight navi `:-moz-focusring { schema: auto }`, entrambi (0,1,0), così gli utenti di Firefox avrebbero perso l'anello di messa a fuoco della tastiera in ogni griglia. globals.css pins che uno esplicitamente a (0,2,0) così batte sia indipendentemente dall'ordine e il valore calcolato è esattamente quello che era. Anche in questo lotto: pubblico/ viene servito con `Cache-Control: pubblico, max-age=0`, quindi tutti i 24 MB di icone, suonerie, loghi e il lavoratore pdf sono stati rivalidati su ogni carico duro. Ora un'ora con stale-while-revalidate — deliberatamente non `immutabile` e deliberatamente non un anno, perché nulla sotto pubblico / è content-hashed il senso / next/static è, quindi un file sostituito da un dispiegamento mantiene il suo URL e `immutabile` sarebbe pin i vecchi byte senza alcun modo per bustarlo. il launchpad. Quei tre siti di chiamata passano attraverso il prossimo / immagine, che serve un WebP di dimensioni di qualche KB. Il file master è lasciato solo: CopilotHero rende lo stesso asset a 148 CSS px e ne ha bisogno. Verificato: tsc mirato --noEmit pulito sopra il wrapper, sia i siti di chiamata successivo/immagine e un campione dei moduli di griglia riscritti con le loro importazioni transitive; tutte le 9 guardie passano gli script, compreso il nuovo, che è stato confermato fallire su un piantato diretto importare prima di essere collegato.

Tutte le modifiche

Come quello che vedi la spedizione?

Ognuno di questi aggiornamenti atterra automaticamente nello spazio di lavoro. Inizia gratis e guardalo crescere settimana dopo settimana.

Inizia gratis per sempreVisualizza il prezzo