MAJ systel lazyload

frontend/package-lock.json

@@ -35,7 +35,7 @@
         "eslint-plugin-react-refresh": "^0.4.16",
         "globals": "^15.14.0",
         "postcss": "^8.4.49",
-        "rollup-plugin-visualizer": "^5.13.1",
+        "rollup-plugin-visualizer": "^5.14.0",
         "vite": "^6.0.5",
         "vite-plugin-compression": "^0.5.1"
       }
@@ -10376,9 +10376,9 @@
       }
     },
     "node_modules/rollup-plugin-visualizer": {
-      "version": "5.13.1",
-      "resolved": "https://registry.npmjs.org/rollup-plugin-visualizer/-/rollup-plugin-visualizer-5.13.1.tgz",
-      "integrity": "sha512-vMg8i6BprL8aFm9DKvL2c8AwS8324EgymYQo9o6E26wgVvwMhsJxS37aNL6ZsU7X9iAcMYwdME7gItLfG5fwJg==",
+      "version": "5.14.0",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-visualizer/-/rollup-plugin-visualizer-5.14.0.tgz",
+      "integrity": "sha512-VlDXneTDaKsHIw8yzJAFWtrzguoJ/LnQ+lMpoVfYJ3jJF4Ihe5oYLAqLklIK/35lgUY+1yEzCkHyZ1j4A5w5fA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {

frontend/package.json

@@ -37,7 +37,7 @@
     "eslint-plugin-react-refresh": "^0.4.16",
     "globals": "^15.14.0",
     "postcss": "^8.4.49",
-    "rollup-plugin-visualizer": "^5.13.1",
+    "rollup-plugin-visualizer": "^5.14.0",
     "vite": "^6.0.5",
     "vite-plugin-compression": "^0.5.1"
   }

frontend/src/components/Faq.jsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from "react";
 import { Box, TextField, Typography, Collapse, CircularProgress } from "@mui/material";
 import axios from "axios";
 
+
 const Faq = ({ showFAQ }) => {
   const [faqSearch, setFaqSearch] = useState("");
   const [filteredFaqs, setFilteredFaqs] = useState([]);

frontend/src/components/Pages/Contact.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, lazy, Suspense } from "react";
 import {
   Box,
   TextField,
@@ -19,6 +19,7 @@ import {
 import SEO from "../SEO";
 import api from "../../api";
 import Faq from "../Faq";
+const FAQ = lazy(() => import('../Faq'));
 
 const Contact = () => {
   const [metaTitle, setMetaTitle] = useState("Contactez-nous");
@@ -158,6 +159,7 @@ const Contact = () => {
           <Typography
             variant="h1"
             sx={{
+              color: "#000",
               fontWeight: "bold",
               fontSize: { xs: "2rem", md: "3rem", lg: "4rem" },
               mb: 2,
@@ -168,6 +170,7 @@ const Contact = () => {
           <Typography
             variant="body2"
             sx={{
+              color: "#000",
               fontSize: { xs: "1rem", md: "1rem" },
               maxWidth: "600px",
               mx: "auto",
@@ -376,8 +379,9 @@ const Contact = () => {
       </Box>
 
       {/* Section FAQ */}
+      <Suspense fallback={<div>Chargement...</div>}>
       <Faq showFAQ={showFAQ} />
-
+      </Suspense>
       {/* Formulaire de contact */}
       <Box
         sx={{

frontend/src/main.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React,{ lazy, Suspense } from "react";
 import ReactDOM from "react-dom/client";
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import { ThemeProvider } from "@mui/material/styles";
@@ -7,11 +7,15 @@ import { HelmetProvider } from "react-helmet-async";
 import  SimpleReactLightbox  from "simple-react-lightbox";
 
 
+// Lazy loading des pages
+const Home = lazy(() => import('./components/pages/Home.jsx'));
+const About = lazy(() => import('./components/Pages/About'));
+const Contact = lazy(() => import('./components/Pages/Contact'));
 
-import Home from "./components/Pages/Home.jsx";
+// import Home from "./components/Pages/Home.jsx";
 import Post from "./components/Pages/Post";
-import About from "./components/Pages/About";
-import Contact from "./components/Pages/Contact";
+// import About from "./components/Pages/About";
+// import Contact from "./components/Pages/Contact";
 import Search from "./components/Pages/Search"; // Nouveau composant pour la recherche
 import Header from "./components/Header";
 

frontend/vite.config.js

@@ -6,19 +6,23 @@ import path from 'path';
 
 export default defineConfig({
   plugins: [
+    // Plugin React
     react(),
+    // Compression Brotli
     viteCompression({
       algorithm: 'brotliCompress',
       ext: '.br',
-      threshold: 10240, // Seuil pour activer la compression (10 Ko)
+      threshold: 10240, // Fichiers supérieurs à 10 Ko seront compressés
     }),
+    // Compression Gzip
     viteCompression({
       algorithm: 'gzip',
       ext: '.gz',
       threshold: 10240,
     }),
+    // Visualiseur de bundle
     visualizer({
-      open: false, // Désactive l'ouverture automatique du visualiseur
+      open: true, // Ouvre automatiquement le fichier généré après le build
       filename: 'stats.html',
       template: 'treemap',
     }),
@@ -26,35 +30,46 @@ export default defineConfig({
   
   resolve: {
     alias: {
+      // Définit les alias pour des chemins simplifiés
       '@pages': path.resolve(__dirname, './src/pages'),
       '@components': path.resolve(__dirname, './src/components'),
       '@assets': path.resolve(__dirname, './src/assets'),
     },
   },
+  
   build: {
-    target: 'esnext',
-    minify: 'esbuild',
-    sourcemap: true, // Active les sourcemaps pour faciliter le débogage
+    chunkSizeWarningLimit: 1000,
+    target: 'esnext', // Cible des navigateurs modernes
+    minify: 'esbuild', // Minification avec esbuild pour une meilleure performance
+    sourcemap: false, // Désactive les sourcemaps en production (activez pour dev si nécessaire)
     rollupOptions: {
       output: {
         manualChunks(id) {
+          // Création de chunks manuels pour optimiser les performances
           if (id.includes('node_modules')) {
             if (id.includes('@mui')) {
-              return 'vendor_mui';
+              return 'vendor_mui'; // Chunk spécifique à MUI
             }
-            return 'vendor';
+            return 'vendor'; // Autres dépendances
           }
         },
       },
     },
   },
+
   server: {
-    port: 3000,
-    open: true,
-    cors: true,
+    port: 3000, // Définit le port du serveur de développement
+    open: true, // Ouvre automatiquement le navigateur au démarrage
+    cors: true, // Autorise toutes les requêtes CORS
   },
+
   optimizeDeps: {
-    include: ['swiper/react', 'swiper/modules'],
-    exclude: ['cssnano'], // Exclut les dépendances problématiques comme cssnano
+    include: [
+      'swiper/react', // Inclut swiper/react dans les dépendances optimisées
+      'swiper/modules', // Inclut swiper/modules dans les dépendances optimisées
+    ],
+    exclude: [
+      'cssnano', // Exclut les dépendances problématiques comme cssnano
+    ],
   },
 });