Déploiement
Déploiement • Chapitre 2 : Préparation d'un projet avant le déploiement

Préparation du projet pour la production

Envoyer du code brut de développement en production est une catastrophe pour les performances et la sécurité. Le build de production transforme des centaines de fichiers sources en un ensemble compact, minifié, purgé du code mort et taillé pour un chargement instantané sur mobile.

⚡
Minification & Mangle

Suppression des espaces, sauts de ligne et renommage des variables longues (utilisateurConnecte → a).

🌲
Tree-Shaking

Analyse statique de l'AST pour exclure physiquement les fonctions des bibliothèques jamais appelées dans votre code.

🏷️
Cache Busting (Hash)

Ajout d'une empreinte cryptographique dans le nom des fichiers (ex: main.a7f8b9.js) pour un cache CDN infini sans bug.

🔇
Suppression des Logs

Nettoyage automatisé des console.log pour éviter les fuites d'informations sensibles dans la console DevTools.

Simulateur Interactif : Impact des Optimisations de Build

Analyseur de Poids

Activez ou désactivez les optimisations de compilation pour observer la réduction drastique de la taille des fichiers envoyés aux utilisateurs :

Poids du Bundle Frontend transféré : 140 Ko
Optimisé (120 Ko)Estimation 4G lente : 0.22sBrut sans build (4 500 Ko)

Élimination du code mort des bibliothèques

-1800 Ko

Suppression des espaces et raccourcissement des identifiants

-1500 Ko

Purge des console.log et traces de debug

-80 Ko

Algorithme de compression réseau HTTP

-980 Ko

La Règle d'Or du Cache-Control en Production

Pourquoi les bundlers modernes génèrent-ils des fichiers nommés main.7e9f1a.js au lieu de main.js ?

Cela permet une stratégie de mise en cache HTTP parfaite et ultra-rapide :

  • Pour index.html :Cache-Control: no-cache (Le navigateur re-vérifie toujours si une nouvelle version existe).
  • Pour les fichiers avec hash (.js, .css) :Cache-Control: public, max-age=31536000, immutable (Le navigateur et le CDN gardent le fichier en cache pendant 1 an sans jamais le re-télécharger, car dès que le code change, le nom du fichier change automatiquement !).
# Headers Nginx / Cloudflare :
location ~* \.(js|css|png|jpg|webp)$ {
  expires 1y;
  add_header Cache-Control "public, immutable";
}

location = /index.html {
  add_header Cache-Control "no-cache";
}

Configuration d'Élimination des Logs (Vite / esbuild)

Pour éliminer automatiquement tous les console.log et debugger lors du build de production sans toucher manuellement à vos fichiers : 

// vite.config.ts
import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    minify: 'esbuild', // Minification ultra-rapide
    target: 'es2020',
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['angular', 'rxjs'] // Séparation du code framework pour optimiser le cache
        }
      }
    }
  },
  esbuild: {
    // Supprime automatiquement les logs uniquement lors du build de production
    drop: process.env.NODE_ENV === 'production' ? ['console', 'debugger'] : []
  }
});