Zjedź AG Grid 187 KB CSS z krytycznej ścieżki każdej trasy

Performancekamo-internal
Shipped
26 sierpnia 2026 02:11 UTC
Author
kamo
Commit
65eed6d

Batch 4 audytu wydajności po stronie klienta i ostatni z dużych. Aplikacja/globals.css została otwarta z dwoma - importem arkuszy stylów ag-grid i układ korzenia Import globals.csss — więc 187 KB siatki CSS siedział w łeb> wszystkich 143 tras i Zablokowano pierwszą farbę na każdym z nich, w tym /validate i /logout. Arkusze stylów Są jedynym zasobem w tej aplikacji, który naprawdę renderuje blok, który sprawił, że jest to Największy punkt FCP w audycie i dokładnie to, jakie raporty PageSpeed wg "Eliminate Zasoby blokujące render-locking”. Wejście układu CSS spada z 334 KB do 147 KB. Przywóz przenosi się do owijania, które reeksportuje AgGridReact pozostaje niezmieniony, a wszystkie 34 moduły, które importowały ag-grid-react, teraz przechodzą To się robi. Owijanie zamiast 34 rozproszonego importu arkusza stylów, ponieważ 35. siatka to Jeden, który wysyłałby nietematę - porażka, która wygląda jak błąd CSS w funkcji nikt Dotknięte. skrypty/sprawdzają-aggrid-import.mjs egzekwują go i biegną w teście npm. CASCADE, która jest częścią, która wymaga raczej udowodnienia niż twierdzenie. globals.css Teraz ładuje się przed ag-grid zamiast po, więc każda specyfika równa pominie Ag-grid i Tailwind's preflight: preflight użyte do ich wygrania, ag-grid teraz to robi. Przesłuchiwany wyczerpująco z css-tree na obu arkuszach stylów, a nie oczami: - [hidden] jest (0,2,0) i nadal przewyższa wszystkie zasady 167 g/chód z wyświetlaczem na poziomie (0,1,0), Nic ukrytego nie staje się widoczne. Pref's prelight's [role'''button"] daje im - te więzy są no-ops. Specjalistyczne Koderzy (ośmieszać, chwytać, poruszać się, komórka) siedzą na resize i przeciągać uchwyty, które noszą Ani [roli""button"] ani :disabled. - Wszystkie 20 własnych nadpisów tego pliku .ag-theme-alpine jest albo w pełni !ważne, albo (0,3,0)+, więc są niezależne od porządku w obie strony. - pięć zasad nagich elementów ag-grid to "ag-grid-angular" i przyjaciele, nazwy elementów Ta aplikacja nigdy nie renderuje, a nie ustawia niestandardowego właściwości ciała. Jeden prawdziwy flip: ag-grid statki ?[classag-] - zarys: żaden - i statki preflight :-moz-focusring - zarys: automatyczny - oba (0,1,0), więc użytkownicy Firefoksa straciliby Pierścień ostrości klawiatury wewnątrz każdej siatki. globals.css pins, który wyraźnie znajduje się (0,2,0) Tak więc bije zarówno niezależnie od porządku, jak i obliczaną wartość jest dokładnie tym, czym była. Również w tej partii: Publiczne/ jest obsługiwane z ?Cache-Control: publiczna, max-age-0, więc wszystkie 24 MB ikon, Dzwonki, logo i pracownik pdf zostały powtórzone na każdym twardym obciążeniu. Teraz jedna godzina z nieświeżym czasem-reladatem – celowo nie „niezgodnym” i celowo nie rok, Ponieważ nic pod podaniem nie jest publiczne / jest wprowadzone do treści tak, jak /_next/static jest, więc plik Zastępca przez wdrożenie utrzymuje swój adres URL, a "nieznośny" przygwoździłby stare bajty bez możliwości - Ułatwić go. Wyrzutnia. Te trzy strony rozmów przechodzą przez następny / obraz, który obsługuje rozmiar WebP Kilka KB. Plik główny jest sam: CopilotHero renderuje ten sam zasób na 148 CSS px i go potrzebuje. Zweryfikowano: ukierunkowany tsc --noEmit czyste na opakowaniu, zarówno na kolejnych / napastowanych stronach połączeń, jak i próbie przepisanej modułów siatki z ich tranzytu tranzytowego; wszystkie 9 osłony Skrypty przechodzą, w tym nowy, który potwierdzono, że zawiodł na sadzonej bezpośredniej Importuj, zanim zostanie podłączony.

All changes

Jak to, co widzisz żeglugę?

Każda z tych aktualizacji automatycznie ląduje w miejscu pracy. Zacznij za darmo i obserwuj, jak rośnie tydzień po tygodniu.

Start Free ForeverZobacz ceny