perf: optimize JavaScript bundles and GTM loading - Switch to Terser minification for better compression - Add service worker for caching static assets including GTM - Optimize GTM loading with timeout and DOM ready check - Better chunk splitting with vendor separation - Remove console logs in production

index.html

@@ -33,16 +33,36 @@
       <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">
     </noscript>
 
-    <!-- Google Tag Manager - Chargé de manière asynchrone -->
+    <!-- Google Tag Manager - Chargé de manière optimisée -->
     <script>
-      // Defer GTM loading to improve initial page load
+      // Charger GTM de manière non-bloquante avec timeout
-      window.addEventListener('load', function() {
+      (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
-        (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+      new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
-        new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+      j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
-        j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+      'https://www.googletagmanager.com/gtm.js?id='+i+dl;
-        'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+
-        })(window,document,'script','dataLayer','GTM-5V6TCG4C');
+      // Timeout pour éviter que GTM bloque indéfiniment
-      });
+      var timeout = setTimeout(function() {
+        if (!w[l].gtmDidInit) {
+          w[l].gtmDidInit = true;
+          f.parentNode.removeChild(j);
+        }
+      }, 3000); // 3 secondes timeout
+
+      j.onload = function() {
+        clearTimeout(timeout);
+        w[l].gtmDidInit = true;
+      };
+
+      // Attendre que le DOM soit prêt avant d'ajouter GTM
+      if (d.readyState === 'loading') {
+        d.addEventListener('DOMContentLoaded', function() {
+          f.parentNode.insertBefore(j,f);
+        });
+      } else {
+        f.parentNode.insertBefore(j,f);
+      }
+      })(window,document,'script','dataLayer','GTM-5V6TCG4C');
     </script>
     <!-- End Google Tag Manager -->
   </head>

public/sw.js

@@ -0,0 +1,76 @@
+// Service Worker pour mettre en cache les ressources statiques
+const CACHE_NAME = 'portfolio-v1';
+const STATIC_CACHE = 'portfolio-static-v1';
+
+// Ressources à mettre en cache immédiatement
+const STATIC_ASSETS = [
+  '/',
+  '/favicon.ico',
+  '/favicon.svg',
+  '/robots.txt',
+  // GTM sera mis en cache lors de la première visite
+];
+
+// Installer le service worker
+self.addEventListener('install', (event) => {
+  event.waitUntil(
+    caches.open(STATIC_CACHE).then((cache) => {
+      return cache.addAll(STATIC_ASSETS);
+    })
+  );
+  // Forcer l'activation immédiate
+  self.skipWaiting();
+});
+
+// Activer le service worker
+self.addEventListener('activate', (event) => {
+  event.waitUntil(
+    caches.keys().then((cacheNames) => {
+      return Promise.all(
+        cacheNames.map((cacheName) => {
+          if (cacheName !== STATIC_CACHE && cacheName !== CACHE_NAME) {
+            return caches.delete(cacheName);
+          }
+        })
+      );
+    })
+  );
+  self.clients.claim();
+});
+
+// Intercepter les requêtes
+self.addEventListener('fetch', (event) => {
+  const url = new URL(event.request.url);
+
+  // Stratégie Cache First pour les ressources statiques
+  if (event.request.method === 'GET' &&
+      (url.pathname.match(/\.(css|js|png|jpg|jpeg|webp|svg|woff|woff2|ttf|eot)$/i) ||
+       url.hostname === 'www.googletagmanager.com' ||
+       url.hostname === 'fonts.googleapis.com' ||
+       url.hostname === 'fonts.gstatic.com')) {
+
+    event.respondWith(
+      caches.match(event.request).then((cachedResponse) => {
+        if (cachedResponse) {
+          return cachedResponse;
+        }
+
+        return fetch(event.request).then((response) => {
+          // Ne mettre en cache que les réponses réussies
+          if (response.status === 200 && response.type === 'basic') {
+            const responseClone = response.clone();
+            caches.open(CACHE_NAME).then((cache) => {
+              cache.put(event.request, responseClone);
+            });
+          }
+          return response;
+        }).catch(() => {
+          // Fallback pour les ressources critiques
+          if (url.pathname.includes('gtm.js')) {
+            return new Response('', { status: 404 });
+          }
+        });
+      })
+    );
+  }
+});

src/App.tsx

@@ -5,6 +5,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import { lazy, Suspense } from "react";
 import { ThemeProvider } from "./contexts/ThemeContext";
+import { useServiceWorker } from "./hooks/useServiceWorker";
 
 // Lazy load pages and heavy components for better performance
 const Index = lazy(() => import("./pages/Index"));
@@ -38,21 +39,26 @@ const router = createBrowserRouter([
   },
 ]);
 
-const App = () => (
+const App = () => {
-  <QueryClientProvider client={queryClient}>
+  // Enregistrer le service worker pour la mise en cache
-    <TooltipProvider>
+  useServiceWorker();
-      <ThemeProvider>
+
-        <Suspense fallback={null}>
+  return (
-          <ParticlesBackground />
+    <QueryClientProvider client={queryClient}>
-        </Suspense>
+      <TooltipProvider>
-        <Toaster />
+        <ThemeProvider>
-        <Sonner />
+          <Suspense fallback={null}>
-        <Suspense fallback={<PageLoader />}>
+            <ParticlesBackground />
-          <RouterProvider router={router} />
+          </Suspense>
-        </Suspense>
+          <Toaster />
-      </ThemeProvider>
+          <Sonner />
-    </TooltipProvider>
+          <Suspense fallback={<PageLoader />}>
-  </QueryClientProvider>
+            <RouterProvider router={router} />
-);
+          </Suspense>
+        </ThemeProvider>
+      </TooltipProvider>
+    </QueryClientProvider>
+  );
+};
 
 export default App;

src/hooks/useServiceWorker.ts

@@ -0,0 +1,40 @@
+import { useEffect } from 'react';
+
+export const useServiceWorker = () => {
+  useEffect(() => {
+    if ('serviceWorker' in navigator && process.env.NODE_ENV === 'production') {
+      // Enregistrer le service worker après un petit délai pour ne pas bloquer le rendu
+      const registerSW = async () => {
+        try {
+          const registration = await navigator.serviceWorker.register('/sw.js', {
+            scope: '/'
+          });
+
+          registration.addEventListener('updatefound', () => {
+            const newWorker = registration.installing;
+            if (newWorker) {
+              newWorker.addEventListener('statechange', () => {
+                if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
+                  // Nouvelle version disponible
+                  console.log('New service worker available, consider refreshing the page');
+                }
+              });
+            }
+          });
+
+          console.log('Service Worker registered successfully');
+        } catch (error) {
+          console.log('Service Worker registration failed:', error);
+        }
+      };
+
+      // Attendre que la page soit interactive avant d'enregistrer le SW
+      if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', registerSW);
+      } else {
+        // Petit délai pour ne pas bloquer le rendu initial
+        setTimeout(registerSW, 100);
+      }
+    }
+  }, []);
+};

vite.config.ts

@@ -24,17 +24,30 @@ export default defineConfig(({ mode }) => ({
   },
   build: {
     // Optimisations pour la production
-    minify: 'esbuild', // Utiliser esbuild au lieu de terser (plus rapide, déjà inclus)
+    minify: 'terser', // Utiliser Terser pour une meilleure compression que esbuild
     target: 'esnext', // Code plus moderne et plus petit
-    cssMinify: true,
+    cssMinify: 'esbuild', // Garder esbuild pour CSS (plus rapide)
     // Chunking optimal pour de meilleures performances
     rollupOptions: {
       output: {
-        // Split vendors pour améliorer le cache
+        // Split vendors pour améliorer le cache et réduire les tailles
-        manualChunks: {
+        manualChunks: (id) => {
-          'react-vendor': ['react', 'react-dom', 'react-router-dom'],
+          // React et core
-          'ui-vendor': ['framer-motion', 'lucide-react'],
+          if (id.includes('react') || id.includes('react-dom') || id.includes('react-router')) {
-          'particles': ['@tsparticles/react', '@tsparticles/slim', '@tsparticles/engine'],
+            return 'react-vendor';
+          }
+          // UI libraries
+          if (id.includes('framer-motion') || id.includes('lucide-react') || id.includes('@radix-ui')) {
+            return 'ui-vendor';
+          }
+          // Particles (lazy loaded anyway)
+          if (id.includes('@tsparticles') || id.includes('particles')) {
+            return 'particles';
+          }
+          // Autres node_modules dans un chunk séparé
+          if (id.includes('node_modules')) {
+            return 'vendor';
+          }
         },
         // Nommer les chunks de manière cohérente pour le cache
         chunkFileNames: 'assets/js/[name]-[hash].js',
@@ -43,12 +56,23 @@ export default defineConfig(({ mode }) => ({
       },
     },
     // Optimisation des assets
-    assetsInlineLimit: 4096, // Images < 4kb seront inline en base64
+    assetsInlineLimit: 2048, // Réduire pour inliner moins d'assets
-    chunkSizeWarningLimit: 500, // Limite plus stricte pour éviter les gros bundles
+    chunkSizeWarningLimit: 300, // Limite encore plus stricte
     sourcemap: false, // Désactiver les sourcemaps en production
     // Compression CSS supplémentaire
     cssCodeSplit: true,
-    // Minification supplémentaire
+    // Minification supplémentaire avec Terser
+    terserOptions: {
+      compress: {
+        drop_console: true, // Supprimer les console.log en production
+        drop_debugger: true,
+        pure_funcs: ['console.log', 'console.info', 'console.debug'],
+      },
+      mangle: {
+        safari10: true,
+      },
+    },
+    // Optimisations supplémentaires
     reportCompressedSize: true,
   },
 }));