From c057878b5dd6b921c50b3d18d0d9efad28810400 Mon Sep 17 00:00:00 2001 From: sebvtl728 Date: Wed, 8 Jan 2025 22:19:50 +0100 Subject: [PATCH] MAJ systel lazyload --- frontend/package-lock.json | 8 ++--- frontend/package.json | 2 +- frontend/src/components/Faq.jsx | 1 + frontend/src/components/Pages/Contact.jsx | 8 +++-- frontend/src/main.jsx | 12 ++++--- frontend/vite.config.js | 39 ++++++++++++++++------- 6 files changed, 47 insertions(+), 23 deletions(-) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index a114f38..add3140 100644 --- a/frontend/package-lock.json +++ b/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": { diff --git a/frontend/package.json b/frontend/package.json index e2ac524..8292390 100644 --- a/frontend/package.json +++ b/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" } diff --git a/frontend/src/components/Faq.jsx b/frontend/src/components/Faq.jsx index 1c9f15e..df2a8cf 100644 --- a/frontend/src/components/Faq.jsx +++ b/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([]); diff --git a/frontend/src/components/Pages/Contact.jsx b/frontend/src/components/Pages/Contact.jsx index 35e2222..039be22 100644 --- a/frontend/src/components/Pages/Contact.jsx +++ b/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 = () => { { { {/* Section FAQ */} + Chargement...}> - + {/* Formulaire de contact */} 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"; diff --git a/frontend/vite.config.js b/frontend/vite.config.js index 1b62e5d..7393fb3 100644 --- a/frontend/vite.config.js +++ b/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 + ], }, }); \ No newline at end of file