Ratunek wydajności
Vue 2 → Vue 3, przepisane od zera — i wolne, zanim w ogóle trafiło na produkcję.
- Klient
- Firma cateringowa, Niemcy
- Rola
- Senior frontend engineer, de facto tech lead
- Czas trwania
- [utajnione]
- Stack
- Vue 3 · TypeScript · TanStack Query · SignalR · Biome · Feature-based architecture
Kontekst
Zespół przepisywał dużą aplikację z Vue 2 na Vue 3. Architektura feature-based, TanStack Query, aktualizacje w czasie rzeczywistym przez SignalR. Na papierze: nowocześnie. W przeglądarce: boleśnie wolno.
Problem
- ERR_01
Niewydajny kod na najniższym poziomie: zbędna złożoność, zagnieżdżone pętle, samonapędzające się watchEffecty.
- ERR_02
TanStack Query używany jak globalna szyna zdarzeń — store'y powiązane wywołaniami API, o których nie powinny wiedzieć.
- ERR_03
Reaktywne zapytania w watchEffectach tworzące kaskady requestów: jedno wywołanie odpalało kolejne, i kolejne.
- ERR_04
Pull requesty bez spójnego formatowania — review tonęły w szumie zamiast skupiać się na logice.
Co zrobiłem
- 01
Wprowadziłem twarde reguły z Biome (lint + format) i hooki gita — spójność stała się automatyczna.
- 02
Rozdzieliłem odpowiedzialności modułów i widoków, eliminując coupling między store'ami.
- 03
Scentralizowałem wszystkich klientów API, queries, mutations i query keys w jednej typowanej warstwie.
- 04
Zbudowałem silnik inwalidacji: konkretne wiadomości SignalR unieważniają dokładnie te zapytania, których dotyczą.
- 05
Wyeliminowałem łańcuchowe wywołania napędzane reaktywnymi zapytaniami — plus dziesiątki mniejszych poprawek.
Efekt
0
pozostałych kaskad requestów
1
typowane źródło prawdy dla zapytań
RT
celowana inwalidacja w czasie rzeczywistym
100%
PR-ów formatowanych przez maszyny, recenzowanych przez ludzi
Efekt: aplikacja działa tak szybko, jak to tylko możliwe — i tak zostanie, bo reguły pilnują się same.
Masz wolną aplikację?
Widziałem gorsze. Porozmawiajmy.