Wszystkie wpisy

vue3-toastify lądował w entry chunku każdej strony — także tych, które nigdy nie pokazują toasta. Composable z dynamicznym importem przeniósł go do osobnego chunka ładowanego przy pierwszym użyciu, zdejmując 22 KB z entry.js i 9 KB z entry.css.

Jak pojedynczy inline'owy await w naszym composable'u Vue po cichu serializował całe pobieranie danych podczas renderowania na serwerze i jak onServerPrefetch naprawił to bez żadnych zmian w architekturze.

Jak odkryliśmy, że trzy pliki ze stałymi przekierowań wysyłają 316 KB martwego balastu do każdej przeglądarki, i dlaczego przeniesienie ich do server middleware z fallbackiem w bazie ucięło nasz bundle JavaScriptu o jedną trzecią.

Odkryliśmy, że nasz pipeline optymalizacji obrazów generował idealne wartości srcset, które przeglądarka całkowicie ignorowała. Naprawą okazał się pojedynczy atrybut HTML, który od lat traktowaliśmy jako opcjonalny.

Przepalaliśmy pełne cykle nawigacji Vue Routera tylko po to, żeby poprawić slug w adresie karty produktu. Zamiana router.replace() na history.replaceState() wycięła zbędne re-rendery, naprawiła popsute meta tagi SEO i sprowadziła kanonikalizację po stronie klienta do jednego wywołania, które nie dotyka DOM-u.

Nasz cache na Redisie ciągle zrywał połączenia TLS, kładąc całą warstwę cache'owania. Po benchmarku, który omal nie wysłał nas w złą stronę, przenieśliśmy się na PostgreSQL — ta sama wydajność, zero dropów, o jeden serwis mniej do utrzymania.

Jak zabezpieczyliśmy komunikację między serwisami tokenami podpisanymi HMAC-SHA256, które wygasają po 10 sekundach — bez stanu sesji, bez kluczy API do rotowania, bez odpytywania bazy w middleware.

Nasza monolityczna aplikacja Nuxt regularnie wykładała się na limicie 2 GB pamięci. Podbiliśmy go do 4 GB — dwa razy drożej, ten sam problem u podstaw. Po pięciu dniach nieudanych optymalizacji (kompresja strumieniowa, polling po Redisie, cache SWR) rozbiliśmy monolit na trzy niezależne serwisy. Każdy dostał własne 2 GB, łączny koszt spadł, a crashe się skończyły.

Jak zastąpienie proxowania odpowiedzi API redirectami 307 do podpisanych URL-i CDN wyzerowało koszty transferu na origin i usunęło całą klasę bugów ze streamowaniem.

Dodaliśmy arabski i portugalski do naszej konfiguracji i18n w Nuxcie, ale zablokowaliśmy je na produkcji. Problem? Sitemapy, tagi hreflang i crawlery nic o tym nie wiedziały — generując tysiące bezużytecznych URL-i, podwajając liczbę zapytań do API i przepalając wywołania funkcji serverless.

Powtarzalny radial-gradient, który świetnie wyglądał w projekcie, zamienił moją stronę w ociężałego potworka. Oto jak namierzyłem winowajcę i naprawiłem go inline SVG w data URI — zero różnicy wizualnej, płynne 60 klatek na sekundę.

Jak zwykły destructuring usunął zbędne obiekty tłumaczeń z odpowiedzi API, odciążył cache i przyspieszył frontend.

Jak wdrożyć cache Stale-While-Revalidate, który dostosowuje się do typu użytkownika i wrażliwości endpointu. Klienci B2B dostają świeże stany magazynowe, a anonimowi odwiedzający szybsze odpowiedzi z cache.

Jak upchnęliśmy 6x więcej wpisów cache w instancji Redisa o rozmiarze 1 GB, używając kompresji gzip i zachowując przy tym type safety oraz narzut poniżej milisekundy.

Jak pozornie poprawny cache key oparty na url.hostname prowadzi do fragmentacji cache'u między requestami SSR a tymi z przeglądarki i drastycznie obniża cache hit rate w aplikacjach Nuxt/Nitro.

Jak zastąpiliśmy powolne czyszczenie cache'a po kluczach natychmiastową inwalidacją opartą na timestampach, nie tracąc przy tym wydajności SWR.

Dlaczego importowanie enumów Prismy bezpośrednio w kodzie client-side psuje produkcyjne buildy i jaki wzorzec ze stałymi to naprawia.

Dogłębne spojrzenie na niespójną paginację w PostgreSQL i na to, dlaczego deterministyczne sortowanie w złożonych zapytaniach jest tak ważne — bo nasi użytkownicy dostawali od tego szału

Optymalizując projekt w Nuxt 3, odkryłem, że nadmierny automatyczny prefetch napędzał zużycie transferu na Vercelu. Globalne wyłączenie prefetcha mocno ścięło koszty i ruch sieciowy.

Przejąłem projekt w Nuxt 3, który zjadał ponad 50 dolarów dziennie na transferze w Vercelu. Winowajca? Jeden import z gwiazdką, który wciągał do bundle'a całą bibliotekę Font Awesome. Oto jak go znalazłem i naprawiłem.

Od czerwonych wyników w Lighthouse do soczystej zieleni: technika lazy loadingu, która ścięła początkowy bundle o 92% i podniosła wydajność o 47%

Jak zbudowaliśmy wielowarstwowy system wyszukiwania, który rozumie intencję użytkownika, radzi sobie z literówkami i dostarcza trafne wyniki w 9 językach, korzystając z PostgreSQL, TypeScriptu i sprytnych algorytmów

Jak wykorzystać generics w Vue 3, żeby zbudować type-safe komponent karuzeli obsługujący produkty, banery, strefy i wszystko inne — bez duplikowania kodu.

Czego 50 commitów w jednym komponencie Vue przez 3 miesiące nauczyło mnie o iteracyjnym rozwoju, właściwym momencie na refactor i panowaniu nad złożonością.

Gotowy wrapper na NuxtLink, który automatycznie dodaje rel="nofollow" do linków z parametrami query i zapobiega wyciekaniu PageRank na przefiltrowanych i sparametryzowanych URL-ach.

Prosty kontrakt między frontendem a backendem na obsługę daty i czasu, który eliminuje bugi w harmonogramowaniu między strefami i uniezależnia aplikację od lokalizacji serwera.

Git worktrees świetnie sprawdzają się przy równoległej pracy nad kilkoma branchami, ale Vercel CLI się w nich wywala. Oto poprawka dla monorepo opartego na Nuxcie.

Dlaczego po deployu użytkownicy dostają błędy 403 na plikach JavaScript i jak naprawia to plugin Nuxta w pięciu linijkach.

Proste zmiany, które naprawiają Largest Contentful Paint i Cumulative Layout Shift w Nuxt 3. Preconnect, wymiary obrazków i ukryci zabójcy wydajności.

Trzy antywzorce SQL, które zabijały wydajność naszej wyszukiwarki, i optymalizacje CTE, które to naprawiły.

Jak naprawić błąd 153 przy odtwarzaniu osadzonych filmów z YouTube, przechodząc na youtube-nocookie.com, i przy okazji zyskać na wydajności oraz prywatności.

Jak 10 linijek konfiguracji po cichu zablokowało tysiące stron produktowych przed indeksowaniem w Google i jakie zaskakujące zachowanie nuxtjs/sitemap za tym stało.

Jak próbowałem różnych podejść do konfiguracji środowiska Turborepo + Prisma + Nuxt i jakie rozwiązanie ostatecznie zadziałało na Vercelu.

Po tych poprawkach aplikacja ruszyła na Vercelu bez zarzutu. W końcu mogłem się położyć spać.

Zapamiętaj, drogi devie: satisfies sprawdza typ obiektu, nie wpływając na wnioskowanie TypeScriptu, i powinien być jednym z twoich głównych sprzymierzeńców przy typowaniu stałych obiektów.