Optymalizacja wydajności Vue obejmuje rozmiar pakietu, efektywność renderowania i koszt reaktywności. Oto najwyższoimpact techniki. ## 1. Dzielenie kodu / lenive loading ```js // lazy-load routes and heavy components → smaller initial bundle const routes = [{ path: "/admin", component: () => import("./Admin.vue") }]; const Chart = defineAsyncComponent(() => import("./Chart.vue")); ``` Największy zysk przy ładowaniu: nie wysyłaj kodu, którego użytkownik jeszcze nie potrzebuje. ## 2. Prawidłowe użycie v-show vs v-if ```vue

``` ## 3. Zawsze używaj stabilnego :key w v-for ```vue

``` ## 4. Unikaj niepotrzebnej reaktywności ```js import { shallowRef, shallowReactive } from "vue"; // for large objects you replace wholesale (or 3rd-party instances), skip deep tracking const bigData = shallowRef(hugeObject); // only .value reassignment is reactive Object.freeze(staticConfig); // never-changing data → no reactivity overhead ``` Głęboka reaktywność na dużych obiektach jest droga; `shallowRef`/`shallowReactive`/`Object.freeze` unikają śledzenia danych, które go nie potrzebują. ## 5. Computed (cached) zamiast metod dla wartości pochodnych ```vue

``` ## 6. v-once / v-memo dla zawartości statycznej lub rzadko się zmieniającej ```vue

...

``` ## 7. Wirtualizuj długie listy ```text Rendering 10,000 rows kills performance → use vue-virtual-scroller / TanStack Virtual to render only the visible rows. ``` ## 8. Optymalizuj obrazy i rozważ SSR/SSG (Nuxt) dla pierwszego malowania ## Mierzenie ```text Vue DevTools (component render timings, why a component re-rendered) build output / rollup-plugin-visualizer → bundle composition Lighthouse → Core Web Vitals ``` ## Dlaczego to ważne Vue jest domyślnie szybki, ale duże aplikacje wymagają celowej optymalizacji: **lazy-load** aby zmniejszyć pakiety, prawidłowo wybierz `v-if`/`v-show`, używaj stabilnych kluczy, unikaj nadmiernej reaktywności na dużych danych (`shallowRef`/`freeze`), buforuj za pomocą `computed`/`v-memo` i wirtualizuj długie listy. Wiedzenie, która technika rozwiązuje które wąskie gardło — i pomiar za pomocą DevTools/Lighthouse zamiast zgadywania — to co utrzymuje rosnącą aplikację Vue responsywną.

Vue.js pytań