YUNOVA · Vue.js
Module 12: Architecture and performance
Lazy loading routes and code splitting in Vue
Key points
- Use component: () => import('./Page.vue') to lazy load a route.
- The bundler splits each lazy route into its own file.
- Users download a page's code only when they visit it.
Large-scale Vue app architecture
Key points
- Group code by feature rather than by file type.
- Share logic through composables and keep stores focused.
- Set clear rules for folder structure and naming.
Pinia plugins and state persistence
Key points
- Pinia plugins add features to every store.
- A persistence plugin saves store state to localStorage.
- Persist only what is needed and never secrets.
Vue performance optimisation
Key points
- Use v-once and v-memo to skip unneeded re-renders.
- shallowRef avoids deep tracking of large data.
- Virtual scrolling keeps long lists fast.