Bundle Analysis

React 🟡 Mid

Définition

Analyse visuelle du contenu du bundle JavaScript pour identifier les dépendances lourdes et les opportunités de code splitting.

Analogie

Comme une radio de valise a l'aéroport : 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.

#performance#devtools

← → au clavier pour passer d'une fiche à l'autre