⚡ Optimisation de la taille du bundle

📘 Analyser la taille du bundle

Pour analyser la taille de votre bundle, plusieurs outils sont disponibles :

📘 Webpack Bundle Analyzer

npm install --save-dev webpack-bundle-analyzer

Dans votre configuration webpack :

const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;

module.exports = {
  plugins: [new BundleAnalyzerPlugin()],
};

📘 Next.js Bundle Analyzer

Pour Next.js, utilisez :

npm install --save-dev @next/bundle-analyzer

📘 Astuces pour réduire la taille

📘 1. Code splitting

Utilisez le chargement dynamique :

import dynamic from "next/dynamic";

const DynamicComponent = dynamic(() => import("../components/Heavy"));

📘 2. Tree shaking

Choisissez un import compatible avec l'élimination du code mort :

// ❌ Mauvais : importe le package CommonJS complet
import lodash from "lodash";

// ✅ Bon : version ESM mieux tree-shakable
import { map } from "lodash-es";

// ✅ Bon aussi : import ciblé par chemin
import mapByPath from "lodash/map";

📘 3. Compression des images

Utilisez des formats optimisés comme WebP :

import Image from "next/image";

export default function OptimizedImage() {
  return (
    <Image
      src="/image.webp"
      width={500}
      height={300}
      alt="Image optimisée"
    />
  );
}

📘 4. Minification des dépendances

Vérifiez régulièrement vos dépendances avec npm-check :

npx npm-check

🧪 Bonnes pratiques

• Utilisez import() pour le code splitting.
• Évitez les dépendances lourdes.
• Optimisez les images et assets.
• Mettez en place un budget de performance.
• Surveillez régulièrement la taille du bundle.

📘 Outils recommandés

• webpack-bundle-analyzer
• source-map-explorer
• bundlephobia.com
• import-cost (extension VS Code)

En suivant ces conseils, vous pourrez maintenir une taille de bundle optimale et améliorer les performances de votre application.