// 1. Code splitting par route -- chaque page devient un chunk séparé, chargé à la demande
const routes = [
  { path: '/', component: () => import('./pages/Accueil.vue') },
  { path: '/admin', component: () => import('./pages/Admin.vue') }, // jamais téléchargé pour un visiteur normal
]

<!-- 2. defineAsyncComponent pour des composants lourds hors du chemin critique -->
<script setup>
import { defineAsyncComponent } from 'vue'

const EditeurRiche = defineAsyncComponent(() => import('./components/EditeurRiche.vue'))
const GraphiqueLourd = defineAsyncComponent(() => import('./components/GraphiqueLourd.vue'))
</script>

<template>
  <!-- ces gros composants (souvent liés à des libs tierces volumineuses) ne pèsent
       sur le bundle initial QUE lorsqu'ils sont effectivement affichés -->
  <EditeurRiche v-if="modeEdition" />
  <GraphiqueLourd v-if="ongletActif === 'stats'" />
</template>

<!-- 3. KeepAlive : évite de détruire/recréer des composants coûteux au changement d'onglet -->
<script setup>
import { ref } from 'vue'
const ongletActif = ref('profil')
</script>

<template>
  <!-- include/exclude limitent le cache aux composants nommés voulus (par leur `name`) -->
  <KeepAlive :include="['OngletProfil', 'OngletStatistiques']" :max="5">
    <component :is="ongletActif === 'profil' ? OngletProfil : OngletStatistiques" />
  </KeepAlive>
</template>

<!-- 4. v-memo : "memoïse" un sous-arbre, il n'est re-rendu QUE si une des valeurs surveillées change -->
<template>
  <div v-for="item in listeVolumineuse" :key="item.id" v-memo="[item.id === itemSelectionne]">
    <!-- sous-arbre coûteux : ne se re-rend PAS à chaque frappe si la sélection ne change pas pour CET item -->
    <GraphiqueMiniature :donnees="item.historique" />
    <span :class="{ actif: item.id === itemSelectionne }">{{ item.nom }}</span>
  </div>
</template>

// 5. Virtualisation de longues listes : ne rendre QUE les éléments visibles à l'écran
// (v-for seul sur 10 000 lignes crée 10 000 noeuds DOM -> catastrophe de performance)
// npm install @tanstack/vue-virtual
import { useVirtualizer } from '@tanstack/vue-virtual'
import { ref, computed } from 'vue'

const conteneurRef = ref(null)
const items = ref(Array.from({ length: 10000 }, (_, i) => `Ligne ${i}`))

const virtualiseur = useVirtualizer(computed(() => ({
  count: items.value.length,
  getScrollElement: () => conteneurRef.value,
  estimateSize: () => 40, // hauteur estimée d'une ligne en px
  overscan: 5,             // marge de lignes rendues hors-écran pour un scroll fluide
})))

// 6. shallowRef pour de grosses structures peu mutées en profondeur (évite le proxy récursif coûteux)
import { shallowRef } from 'vue'
const grosJeuDeDonnees = shallowRef(chargerDonneesVolumineuses())

// 7. Éviter les computed inutilement recréés à chaque rendu à l'intérieur d'un v-for
// Mauvais : une fonction inline recalculée à chaque évaluation du template
// <div v-for="x in liste">{{ liste.filter(y => y.cat === x.cat).length }}</div>
// Bon : précalculer en amont dans une computed unique
const compteursParCategorie = computed(() => {
  const compteurs = {}
  for (const x of liste.value) compteurs[x.cat] = (compteurs[x.cat] ?? 0) + 1
  return compteurs
})

# 8. Analyser le bundle de production pour traquer les dépendances lourdes
npm install -D rollup-plugin-visualizer
# puis dans vite.config.js : plugins: [vue(), visualizer({ open: true })]
npm run build