How do you optimize performance in a Nuxt.js application?

Answer

Performance optimization in Nuxt spans multiple layers: (1) Lazy-load components with the Lazy prefix and useFetch({ lazy: true }) for non-critical data. (2) Use route-level code splitting which Nuxt does automatically, and further analyze bundles with nuxt analyze or Rollup visualizer. (3) Enable Nitro's cache layer using routeRules: { '/api/**': { cache: { maxAge: 60 } } } in nuxt.config.ts to cache API responses. (4) Use @nuxt/image with proper providers for image optimization. (5) Prerender static routes with routeRules: { '/about': { prerender: true } } for CDN delivery. (6) Configure Brotli/gzip compression via Nitro's compression plugin. (7) Use Pinia with careful store design to avoid unnecessary re-renders. (8) Profile with Chrome DevTools and Nuxt DevTools' timeline tab.