Comment analyser les bundles d'applications Next.js

En savoir plus sur le contenu de vos ensembles d'applications Next.js

Next nous fournit un moyen d'analyser les bundles de code générés.

Ouvrez le fichier package.json de l'application et dans la section scripts, ajoutez ces 3 nouvelles commandes:

"analyze": "cross-env ANALYZE=true next build",
"analyze:server": "cross-env BUNDLE_ANALYZE=server next build",
"analyze:browser": "cross-env BUNDLE_ANALYZE=browser next build"

Comme ça:

{
  "name": "firstproject",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start",
    "analyze": "cross-env ANALYZE=true next build",
    "analyze:server": "cross-env BUNDLE_ANALYZE=server next build",
    "analyze:browser": "cross-env BUNDLE_ANALYZE=browser next build"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "next": "^9.1.2",
    "react": "^16.11.0",
    "react-dom": "^16.11.0"
  }
}

puis installez ces 2 packages:

npm install --dev cross-env @next/bundle-analyzer

Créer unnext.config.jsfichier à la racine du projet, avec ce contenu:

const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true'
})

module.exports = withBundleAnalyzer({})

Maintenant, exécutez la commande

npm run analyze

Cela devrait ouvrir 2 pages dans le navigateur. Un pour les bundles client et un pour les bundles serveur:

C'est incroyablement utile. Vous pouvez inspecter ce qui prend le plus de place dans les bundles, et vous pouvez également utiliser la barre latérale pour exclure les bundles, pour une visualisation plus facile des plus petits:

Téléchargez mon gratuitManuel Next.js


Plus de prochains tutoriels: