fix nginx

This commit is contained in:
kinou-p 2025-10-02 18:42:42 +02:00
parent f92e6b0b16
commit d4718ece6f
3 changed files with 11 additions and 66 deletions

View File

@ -26,11 +26,7 @@
<meta name="twitter:site" content="@lovable_dev" />
<meta name="twitter:image" content="https://lovable.dev/opengraph-image-p98pqg.png" />
<!-- Preload des ressources critiques pour optimiser le chemin critique -->
<!-- Preload du CSS principal (inline dans le HTML généré par Vite) -->
<link rel="modulepreload" href="/src/main.tsx">
<!-- Google Fonts - Optimisé avec display=swap et chargement asynchrone -->
<!-- Google Fonts - Optimisé avec display=swap -->
<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:wght@400;500;600;700&display=swap">
<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" media="print" onload="this.media='all'">
<noscript>
@ -39,33 +35,6 @@
<!-- Google Tag Manager sera chargé dynamiquement après consentement pour optimiser LCP/FCP -->
<!-- Voir src/utils/gtm.ts et src/main.tsx pour l'implémentation -->
<!-- Optimisation du rendu initial -->
<style>
/* Critical CSS pour éviter le FOUC (Flash of Unstyled Content) */
#root {
min-height: 100vh;
background: hsl(222.2 84% 4.9%); /* Couleur de fond dark par défaut */
}
/* Spinner de chargement inline pour un feedback immédiat */
.initial-loader {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 48px;
height: 48px;
border: 3px solid rgba(139, 92, 246, 0.2);
border-top-color: rgb(139, 92, 246);
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: translate(-50%, -50%) rotate(360deg); }
}
</style>
</head>
<body>
@ -73,10 +42,7 @@
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5V6TCG4C"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<div id="root">
<!-- Loader initial visible immédiatement -->
<div class="initial-loader"></div>
</div>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>

View File

@ -60,6 +60,11 @@ server {
expires 1y;
add_header Cache-Control "public, immutable";
add_header Vary "Accept-Encoding";
# Preload header pour les ressources critiques
location ~* -[a-f0-9]{8}\.(css|js)$ {
add_header Link "</assets/js/react-vendor-*.js>; rel=preload; as=script" always;
}
}
# Cache static assets - Fonts
@ -84,12 +89,9 @@ server {
add_header Pragma "no-cache" always;
add_header Expires "0" always;
# Ajout de Link headers pour preconnect et dns-prefetch
add_header Link "<https://fonts.googleapis.com>; rel=dns-prefetch, <https://fonts.googleapis.com>; rel=preconnect" always;
add_header Link "<https://fonts.gstatic.com>; rel=dns-prefetch, <https://fonts.gstatic.com>; rel=preconnect; crossorigin" always;
# Early hints (HTTP 103) si supporté par le serveur
# Cela permet d'envoyer les hints avant même le HTML
# Ajout de Link headers pour preconnect
add_header Link "<https://fonts.googleapis.com>; rel=preconnect" always;
add_header Link "<https://fonts.gstatic.com>; rel=preconnect; crossorigin" always;
}
# Disable cache for service worker if you add one later

View File

@ -3,21 +3,6 @@ import react from "@vitejs/plugin-react-swc";
import path from "path";
import { componentTagger } from "lovable-tagger";
// Plugin personnalisé pour optimiser le HTML
const htmlOptimizationPlugin = () => ({
name: 'html-optimization',
transformIndexHtml(html: string) {
// Ajouter des hints de ressources critiques
return html.replace(
'</head>',
` <!-- Resource Hints pour optimiser le chargement -->
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
</head>`
);
},
});
// https://vitejs.dev/config/
export default defineConfig(({ mode }) => ({
server: {
@ -31,11 +16,7 @@ export default defineConfig(({ mode }) => ({
"0.0.0.0"
]
},
plugins: [
react(),
mode === "development" && componentTagger(),
mode === "production" && htmlOptimizationPlugin(),
].filter(Boolean),
plugins: [react(), mode === "development" && componentTagger()].filter(Boolean),
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
@ -112,9 +93,5 @@ export default defineConfig(({ mode }) => ({
cssCodeSplit: true,
// Minification supplémentaire
reportCompressedSize: true,
// Optimiser le HTML généré
modulePreload: {
polyfill: false, // Pas de polyfill pour modulepreload (navigateurs modernes)
},
},
}));