DLDevLadder📒 My Notebook
Roadmap › Vue.js 3 (with Pinia, Vue Router & Nuxt basics) › Module: Quality and Performance
Lessons in this course (17)

15. Performance optimisation

Advanced★ Must knowLesson 15 of 17
  1. Lazy-load routes and heavy components (() => import(), defineAsyncComponent).
  2. Stable :keys; avoid v-if + v-for together; prefer v-show for frequent toggles.
  3. Virtual scrolling for long lists (vue-virtual-scroller, TanStack Virtual).
  4. shallowRef/shallowReactive/markRaw for large immutable data or third-party instances.
  5. v-once / v-memo for static or rarely changing subtrees.
  6. Computed properties instead of methods in templates (cached).
  7. Keep props stable so child components don't re-render unnecessarily (Vue already skips children whose props didn't change).
  8. KeepAlive for tabs to avoid re-creating components.
  9. SSR/SSG with Nuxt for first paint and SEO; lazy hydration (3.5).
  10. Analyse bundles (rollup-plugin-visualizer), tree-shake imports, production builds.
← Previous
Forms and validation