Bundle Analysis

React 🟡 Mid

Definition

Analyse visuelle du contenu du bundle JavaScript pour identifier les dependances lourdes et les opportunites de code splitting.

Analogie

Comme une radio de valise a l'aeroport : tu vois exactement ce qui prend le plus de place dans ton bagage.

Exemple de code

// Avec @next/bundle-analyzer
// next.config.js
const withAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});
module.exports = withAnalyzer(nextConfig);
// ANALYZE=true npm run build

Cas d'usage

Diagnostiquer pourquoi le bundle est trop gros et prioriser les optimisations de taille.

Termes lies

#performance#devtools