121 lines
4.0 KiB
TypeScript
121 lines
4.0 KiB
TypeScript
import { defineConfig } from "vite";
|
|
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: {
|
|
host: "::",
|
|
port: 8080,
|
|
allowedHosts: [
|
|
"alexandre-pommier.com",
|
|
"www.alexandre-pommier.com",
|
|
"localhost",
|
|
"127.0.0.1",
|
|
"0.0.0.0"
|
|
]
|
|
},
|
|
plugins: [
|
|
react(),
|
|
mode === "development" && componentTagger(),
|
|
mode === "production" && htmlOptimizationPlugin(),
|
|
].filter(Boolean),
|
|
resolve: {
|
|
alias: {
|
|
"@": path.resolve(__dirname, "./src"),
|
|
},
|
|
},
|
|
build: {
|
|
// Optimisations pour la production
|
|
minify: 'esbuild', // Utiliser esbuild au lieu de terser (plus rapide, déjà inclus)
|
|
target: 'esnext', // Code plus moderne et plus petit
|
|
cssMinify: true,
|
|
// Chunking optimal pour de meilleures performances
|
|
rollupOptions: {
|
|
output: {
|
|
// Split vendors pour améliorer le cache et réduire le code inutilisé
|
|
manualChunks: (id) => {
|
|
// Ignorer les node_modules non critiques
|
|
if (id.includes('node_modules')) {
|
|
// React core - bundle séparé pour un meilleur cache
|
|
if (id.includes('/react/') || id.includes('/react-dom/') || id.includes('/scheduler/')) {
|
|
return 'react-core';
|
|
}
|
|
|
|
// React Router - souvent utilisé
|
|
if (id.includes('/react-router-dom/') || id.includes('/@remix-run/')) {
|
|
return 'react-router';
|
|
}
|
|
|
|
// Radix UI - grouper tous les composants ensemble avec tree-shaking
|
|
if (id.includes('@radix-ui/')) {
|
|
return 'radix-ui';
|
|
}
|
|
|
|
// Framer Motion - animations (peut être volumineux)
|
|
if (id.includes('/framer-motion/')) {
|
|
return 'animations';
|
|
}
|
|
|
|
// Lucide React - icônes (volumineux)
|
|
if (id.includes('/lucide-react/')) {
|
|
return 'icons';
|
|
}
|
|
|
|
// tsparticles - animations de fond (optionnel)
|
|
if (id.includes('@tsparticles/') || id.includes('/tsparticles/')) {
|
|
return 'particles';
|
|
}
|
|
|
|
// TanStack Query
|
|
if (id.includes('@tanstack/')) {
|
|
return 'tanstack';
|
|
}
|
|
|
|
// Autres dépendances moins critiques
|
|
return 'vendor';
|
|
}
|
|
},
|
|
// Nommer les chunks de manière cohérente pour le cache
|
|
chunkFileNames: 'assets/js/[name]-[hash].js',
|
|
entryFileNames: 'assets/js/[name]-[hash].js',
|
|
assetFileNames: 'assets/[ext]/[name]-[hash].[ext]',
|
|
},
|
|
// Optimisations supplémentaires pour le tree-shaking
|
|
treeshake: {
|
|
moduleSideEffects: 'no-external', // Pas d'effets de bord pour les modules externes
|
|
propertyReadSideEffects: false,
|
|
unknownGlobalSideEffects: false,
|
|
},
|
|
},
|
|
// Optimisation des assets
|
|
assetsInlineLimit: 4096, // Images < 4kb seront inline en base64
|
|
chunkSizeWarningLimit: 500, // Limite plus stricte pour éviter les gros bundles
|
|
sourcemap: false, // Désactiver les sourcemaps en production
|
|
// Compression CSS supplémentaire
|
|
cssCodeSplit: true,
|
|
// Minification supplémentaire
|
|
reportCompressedSize: true,
|
|
// Optimiser le HTML généré
|
|
modulePreload: {
|
|
polyfill: false, // Pas de polyfill pour modulepreload (navigateurs modernes)
|
|
},
|
|
},
|
|
}));
|