📊 Capítulo 19: Performance, SEO & PWA

Especialização em Frontend com Vue.js

🗺️ As Dimensões de Performance no Ecossistema Vue & Nuxt

flowchart LR
    OPT["Otimização Frontend"]
    --> CHUNKS["Async Components: defineAsyncComponent(() => import('./Grafico.vue'))"]
    OPT --> IMG["NuxtImg (@nuxt/image com conversão automática para WebP e AVIF)"]
    OPT --> SEO["SSR + Metatags Open Graph dinâmicas via useSeoMeta()"]
    OPT --> PWA["@vite-pwa/nuxt (Service Workers, Cache Offline e Install Prompt)"]

    style OPT fill:#ede7f6,stroke:#512da8,stroke-width:2px
    style CHUNKS fill:#fff3e0,stroke:#ff9800,stroke-width:2px
    style IMG fill:#e8f5e9,stroke:#4caf50,stroke-width:2px
    style SEO fill:#e1f5fe,stroke:#03a9f4,stroke-width:1.5px
    style PWA fill:#c8e6c9,stroke:#2e7d32,stroke-width:2px

🎯 Slide 1: Async Components no Vue Puro

import { defineAsyncComponent } from 'vue';

// O bundle deste componente só é baixado se ele for renderizado!
const EditorPesado = defineAsyncComponent(() => import('./EditorRichText.vue'));

🎯 Slide 2: Imagens Inteligentes com Nuxt Image

<NuxtImg
  src="/banner.jpg"
  width="1200"
  height="600"
  format="webp"
  loading="lazy"
  placeholder
/>

• Gera automaticamente versões responsivas (srcset) para mobile e desktop!

🎯 Slide 3: useSeoMeta para Redes Sociais

useSeoMeta({
  title: 'Meu E-Commerce Enterprise',
  ogTitle: 'Meu E-Commerce Enterprise',
  description: 'Compre produtos com entrega rápida em todo o Brasil',
  ogImage: 'https://site.com/og-banner.png',
  twitterCard: 'summary_large_image',
});