From 4a641ac8027cae0f681358ab0ce7544508c1456a Mon Sep 17 00:00:00 2001
From: louispaulb <louis.targo@gmail.com>
Date: Fri, 3 Jul 2026 20:35:30 -0400
Subject: [PATCH] =?UTF-8?q?perf(ops):=20lazy-load=20heavy=20libs=20&=20she?=
 =?UTF-8?q?ll=20components=20=E2=80=94=20chunks=20route/shell=20bien=20plu?=
 =?UTF-8?q?s=20l=C3=A9gers?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Batch 1 de l'audit d'optimisation. Les libs lourdes étaient statiquement importées
donc livrées même inutilisées → passées en import dynamique / defineAsyncComponent :
- MainLayout : ConversationPanel/PhoneModal/FlowEditor/NewTicket/Orchestrator/
  ServiceStatus/OutboxPanel → async (chunk shell 312 KB → 56 KB, chargé sur CHAQUE page)
- TaskGraphPage : TaskGantt (hy-vue-gantt) → async (2.6 MB → 20 KB ; le Gantt ne charge
  que dans la vue Gantt)
- NetworkPage : cytoscape → import() dans loadNetworkMap (484 KB → 52 KB)
- ReportAR/Revenu/Taxes : chart.js/auto → import() dans renderChart (async) (~150→~10 KB/page)

Total dist inchangé (~8 M) — le code est DÉFÉRÉ en chunks à la demande, pas supprimé.
Gain réel = ce que l'utilisateur télécharge pour VOIR une page. Build OK, leak-check propre,
shell + route rapport vérifiés (aucune erreur d'import).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 apps/ops/src/layouts/MainLayout.vue     | 18 ++++++++++--------
 apps/ops/src/pages/NetworkPage.vue      |  3 ++-
 apps/ops/src/pages/ReportARPage.vue     |  5 +++--
 apps/ops/src/pages/ReportRevenuPage.vue |  5 +++--
 apps/ops/src/pages/ReportTaxesPage.vue  |  5 +++--
 apps/ops/src/pages/TaskGraphPage.vue    |  5 +++--
 6 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/apps/ops/src/layouts/MainLayout.vue b/apps/ops/src/layouts/MainLayout.vue
index 930fda5..44323ce 100644
--- a/apps/ops/src/layouts/MainLayout.vue
+++ b/apps/ops/src/layouts/MainLayout.vue
@@ -168,7 +168,7 @@
 </template>
 
 <script setup>
-import { ref, computed, nextTick, watch } from 'vue'
+import { ref, computed, nextTick, watch, defineAsyncComponent } from 'vue'
 import { useQuasar } from 'quasar'
 import { useRoute, useRouter } from 'vue-router'
 import { useAuthStore } from 'src/stores/auth'
@@ -180,16 +180,18 @@ import {
   Gift, Settings, LogOut, PanelLeftOpen, PanelLeftClose, Mail,
   CalendarRange, CalendarClock, Sparkles, MapPinned, Workflow, RefreshCw, ReceiptText, MessagesSquare, History, Award, Star, ClipboardCheck, HardHat,
 } from 'lucide-vue-next'
-import ConversationPanel from 'src/components/shared/ConversationPanel.vue'
-import PhoneModal from 'src/components/customer/PhoneModal.vue'
+// Composants lourds montés conditionnellement (v-if) → chargés à la demande (defineAsyncComponent) au lieu d'alourdir
+// le chunk MainLayout livré sur CHAQUE page. Aucun accès par ref → sûr. NotificationBell reste synchrone (barre du haut, toujours visible).
+const ConversationPanel = defineAsyncComponent(() => import('src/components/shared/ConversationPanel.vue'))
+const PhoneModal = defineAsyncComponent(() => import('src/components/customer/PhoneModal.vue'))
 import { useSoftphone } from 'src/composables/useSoftphone'
 import NotificationBell from 'src/components/shared/NotificationBell.vue'
 import { useConversations } from 'src/composables/useConversations'
-import FlowEditorDialog from 'src/components/flow-editor/FlowEditorDialog.vue'
-import NewTicketDialog from 'src/components/shared/NewTicketDialog.vue'
-import OrchestratorDialog from 'src/components/shared/OrchestratorDialog.vue'
-import ServiceStatusDialog from 'src/components/shared/ServiceStatusDialog.vue'
-import OutboxPanel from 'src/components/shared/OutboxPanel.vue'
+const FlowEditorDialog = defineAsyncComponent(() => import('src/components/flow-editor/FlowEditorDialog.vue'))
+const NewTicketDialog = defineAsyncComponent(() => import('src/components/shared/NewTicketDialog.vue'))
+const OrchestratorDialog = defineAsyncComponent(() => import('src/components/shared/OrchestratorDialog.vue'))
+const ServiceStatusDialog = defineAsyncComponent(() => import('src/components/shared/ServiceStatusDialog.vue'))
+const OutboxPanel = defineAsyncComponent(() => import('src/components/shared/OutboxPanel.vue'))
 
 const icons = { LayoutDashboard, Users, Truck, Ticket, UsersRound, BarChart3, Gift, Settings, LogOut, PanelLeftOpen, PanelLeftClose, Mail, CalendarRange, CalendarClock, Sparkles, MapPinned, Workflow, RefreshCw, ReceiptText, MessagesSquare, History, Award, Star, ClipboardCheck, HardHat }
 
diff --git a/apps/ops/src/pages/NetworkPage.vue b/apps/ops/src/pages/NetworkPage.vue
index 96f6343..f1be6a8 100644
--- a/apps/ops/src/pages/NetworkPage.vue
+++ b/apps/ops/src/pages/NetworkPage.vue
@@ -696,7 +696,6 @@
 
 <script setup>
 import { ref, computed, onMounted, watch, nextTick, reactive } from 'vue'
-import cytoscape from 'cytoscape'
 import { useRouter } from 'vue-router'
 import { listDocs, updateDoc, createDoc } from 'src/api/erp'
 import { Notify } from 'quasar'
@@ -1172,6 +1171,7 @@ const mapSelectedSite = ref(null)
 const mapSelectedSiteId = ref(null)
 const cyContainer = ref(null)
 let cyInstance = null
+let cytoscape = null // chargé à la demande (lib ~350 KB) — seulement quand on ouvre l'onglet Carte
 
 const mapSelectedSiteLinks = computed(() => {
   if (!mapData.value || !mapSelectedSiteId.value) return []
@@ -1183,6 +1183,7 @@ async function loadNetworkMap () {
   try {
     const resp = await fetch(`${hubUrl}/network/map`)
     mapData.value = await resp.json()
+    if (!cytoscape) cytoscape = (await import('cytoscape')).default // import dynamique : sort la lib du chunk NetworkPage
     await nextTick()
     renderCytoscape()
   } catch (e) {
diff --git a/apps/ops/src/pages/ReportARPage.vue b/apps/ops/src/pages/ReportARPage.vue
index 71b9ed6..e85f578 100644
--- a/apps/ops/src/pages/ReportARPage.vue
+++ b/apps/ops/src/pages/ReportARPage.vue
@@ -30,7 +30,7 @@ import { fetchARReport } from 'src/api/reports'
 import { formatMoney } from 'src/composables/useFormatters'
 import { exportCsv } from 'src/composables/useCsvExport'
 import ReportScaffold from 'src/components/shared/ReportScaffold.vue'
-import Chart from 'chart.js/auto'
+let Chart = null // chart.js ~90 KB → chargé à la demande au 1er rendu de graphique (hors du chunk de la page)
 
 const asOfDate = ref(new Date().toISOString().slice(0, 10))
 const loading = ref(false)
@@ -83,9 +83,10 @@ async function loadReport () {
   }
 }
 
-function renderChart () {
+async function renderChart () {
   if (chartInstance) chartInstance.destroy()
   if (!chartCanvas.value || !summary.value) return
+  if (!Chart) Chart = (await import('chart.js/auto')).default
   const s = summary.value
   chartInstance = new Chart(chartCanvas.value, {
     type: 'doughnut',
diff --git a/apps/ops/src/pages/ReportRevenuPage.vue b/apps/ops/src/pages/ReportRevenuPage.vue
index c263928..c42ef10 100644
--- a/apps/ops/src/pages/ReportRevenuPage.vue
+++ b/apps/ops/src/pages/ReportRevenuPage.vue
@@ -104,7 +104,7 @@ import { fetchRevenueReport } from 'src/api/reports'
 import { formatMoney } from 'src/composables/useFormatters'
 import StatCard from 'src/components/shared/StatCard.vue'
 import DataTable from 'src/components/shared/DataTable.vue'
-import Chart from 'chart.js/auto'
+let Chart = null // chart.js ~90 KB → chargé à la demande au 1er rendu de graphique (hors du chunk de la page)
 
 const now = new Date()
 const startDate = ref(new Date(now.getFullYear(), 0, 1).toISOString().slice(0, 10))
@@ -197,9 +197,10 @@ const CHART_COLORS = [
   '#a855f7', '#3b82f6', '#d946ef', '#0ea5e9', '#f43f5e',
 ]
 
-function renderChart () {
+async function renderChart () {
   if (chartInstance) chartInstance.destroy()
   if (!chartCanvas.value || !chartAccounts.value.length) return
+  if (!Chart) Chart = (await import('chart.js/auto')).default
 
   const months = data.value.months || []
   const labels = months.map(m => {
diff --git a/apps/ops/src/pages/ReportTaxesPage.vue b/apps/ops/src/pages/ReportTaxesPage.vue
index 0279363..7d8dcb7 100644
--- a/apps/ops/src/pages/ReportTaxesPage.vue
+++ b/apps/ops/src/pages/ReportTaxesPage.vue
@@ -73,7 +73,7 @@ import { fetchTaxReport } from 'src/api/reports'
 import { formatMoney } from 'src/composables/useFormatters'
 import { exportCsv } from 'src/composables/useCsvExport'
 import ReportScaffold from 'src/components/shared/ReportScaffold.vue'
-import Chart from 'chart.js/auto'
+let Chart = null // chart.js ~90 KB → chargé à la demande au 1er rendu de graphique (hors du chunk de la page)
 
 const now = new Date()
 const startDate = ref(new Date(now.getFullYear(), 0, 1).toISOString().slice(0, 10))
@@ -136,9 +136,10 @@ async function loadReport () {
   }
 }
 
-function renderChart () {
+async function renderChart () {
   if (chartInstance) chartInstance.destroy()
   if (!chartCanvas.value || !periods.value.length) return
+  if (!Chart) Chart = (await import('chart.js/auto')).default
   const labels = periods.value.map(p => p.label)
   chartInstance = new Chart(chartCanvas.value, {
     type: 'bar',
diff --git a/apps/ops/src/pages/TaskGraphPage.vue b/apps/ops/src/pages/TaskGraphPage.vue
index 862d1dd..e7b39e6 100644
--- a/apps/ops/src/pages/TaskGraphPage.vue
+++ b/apps/ops/src/pages/TaskGraphPage.vue
@@ -73,12 +73,13 @@
 </template>
 
 <script setup>
-import { ref, reactive, computed, onMounted } from 'vue'
+import { ref, reactive, computed, onMounted, defineAsyncComponent } from 'vue'
 import { useQuasar } from 'quasar'
 import { listFlowTemplates, getFlowTemplate, updateFlowTemplate } from 'src/api/flow-templates'
 import { HUB_URL } from 'src/config/hub'
 import TaskDependencyGraph from 'src/components/flow-editor/TaskDependencyGraph.vue'
-import TaskGantt from 'src/components/flow-editor/TaskGantt.vue'
+// Vue Gantt (hy-vue-gantt, lourd) rendu seulement dans la vue « gantt » → chargé à la demande.
+const TaskGantt = defineAsyncComponent(() => import('src/components/flow-editor/TaskGantt.vue'))
 
 const $q = useQuasar()
 const view = ref('dag')