Nehmen Sie die 187 KB CSS von AG Grid vom kritischen Weg jeder Route

Performancekamo-internal
Verschifft
26. August 2026 um 02:11 UTC
Autor
kamo
Ausschuss
65eed6d

Batch 4 der Client-seitige Leistungsprüfung, und der letzte der großen. app/globals.css eröffnet mit zwei @importe von ag-grid Stylesheets, und das Root-Layout importiert globals.css - also 187 KB des Grids CSS saß im <head&gt; aller 143 Routen und blockierte erste Farbe auf jedem von ihnen, einschließlich /validate und /logout. Stylesheets sind die einzige Ressource in dieser App, die wirklich Render-Block, die dies gemacht größter FCP-Punkt im Audit und genau das, was PageSpeed berichtet unter "Eliminate Render-Blocking-Ressourcen". Der Eintrag des Layouts CSS fällt von 334 KB auf 147 KB. Die Importe bewegen sich auf ************ ein Wrapper, der re-exportiert AgGridReagieren Sie unverändert, und alle 34 Module, die ag-grid-react importiert haben, gehen jetzt durch es. Ein Wrapper statt 34 verstreute Stylesheet-Importe, weil das 35. Gitter ist die eine, die unthemed versenden würde - ein Ausfall, der wie ein CSS-Bug in einem Feature niemand aussieht gerührt. scripts/check-aggrid-import.mjs erzwingt es und läuft im npm Test. THE CASCADE, das ist der Teil, der bewiesen und nicht behauptet werden musste. globals.css jetzt Lasten VOR ag-grid statt nach, so dass jede Gleichbesonderheit Krawatte zwischen ag-grid und Tailwind's Preflight Flips: Preflight verwendet, um sie zu gewinnen, ag-grid jetzt tut. Erreichbar mit cs-Baum über beide Stylesheets und nicht mit dem Auge geprüft: - [hidden] ist (0,2,0) und immer noch übertroffen alle 167 ag-grid-Anzeigen-Regeln unter (0,1,0), so nichts Verborgenes sichtbar wird. Preflight [role="Button"] gibt sie - diese Bindungen sind No-Ops. Die spezialisierten Coder (ew-resize, grab, move, cell) sitzen auf der Größe und Drag-Griffe, die tragen weder [role="button"] noch :disabled. - Alle 20 eigenen .ag-theme-alpine-Überschreibungen sind entweder vollständig !wichtig oder (0,3,0)+, also sind sie so oder so auftragsunabhängig. - ag-grid's fünf nackte Element-Regeln sind <ag-grid-eckig&s und Freunde, Elementnamen diese App macht nie wieder, plus eine Körper eigene Eigenschaft Vorflug nicht gesetzt. Ein echter Flip: ag-grid Schiffe -[Klasse]=ag-] { Umriss: keine . und Preflight-Schiffe :-moz-focusring { outline: Auto, beide (0,1,0), so Firefox-Nutzer hätten die Tastatur-Fokus-Ring in jedem Gitter. globals.css pins, dass man explizit bei (0,2,0) so schlägt es beide unabhängig von der Ordnung und der berechnete Wert ist genau das, was es war. Auch in dieser Charge: public/ wird mit "Cache-Control: public, max-age=0" serviert, also alle 24 MB Symbole, Klingeltöne, Logos und der pdf-Arbeiter wurden auf jede harte Ladung neuvalidiert. Jetzt eine Stunde mit abgestandenen-wähnen-revalidaten - absichtlich nicht "unveränderbar" und absichtlich kein Jahr, weil nichts unter öffentlich/ inhaltsgehasht ist, wie es /_next/static ist, also eine Datei ersetzt durch eine Enteignung behält seine URL und "unveränderlich" würde die alten Bytes ohne jede Möglichkeit um es zu sprengen. die Startrampe. Diese drei Call-Sites gehen durch Next / Image, das eine Größe WebP dient von ein paar KB. Die Stammdatei wird in Ruhe gelassen: CopilotHero macht den gleichen Vermögenswert bei 148 CSS px und braucht es. Verifiziert: gezielt tsc --noEmit sauber über den Wrapper, sowohl Next/Image Call Sites und eine Probe der umgeschriebenen Grid-Module mit ihren transitiven Importen; alle 9 Wachen Skripte passieren, einschließlich der neuen, die bestätigt wurde, auf einem gepflanzten direkten versagen importieren, bevor sie verdrahtet.

Alle Änderungen

Wie, was Sie sehen Versand?

Jedes dieser Updates landet automatisch in Ihrem Arbeitsbereich. Starten Sie frei und beobachten Sie es Woche für Woche wachsen.

Free Forever startenPreisgestaltung anzeigen