Cómo analizar los paquetes de aplicaciones Next.js

Obtenga más información sobre el contenido de sus paquetes de aplicaciones Next.js

A continuación, nos proporciona una forma de analizar los paquetes de código que se generan.

Abra el archivo package.json de la aplicación y en la sección de scripts agregue esos 3 nuevos comandos:

"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"

Como esto:

{
  "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"
  }
}

luego instale esos 2 paquetes:

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

Crear unnext.config.jsarchivo en la raíz del proyecto, con este contenido:

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

module.exports = withBundleAnalyzer({})

Ahora ejecuta el comando

npm run analyze

Esto debería abrir 2 páginas en el navegador. Uno para los paquetes de cliente y otro para los paquetes de servidor:

Esto es increíblemente útil. Puede inspeccionar lo que ocupa más espacio en los paquetes, y también puede usar la barra lateral para excluir paquetes, para una visualización más fácil de los más pequeños:

Descarga mi gratisManual de Next.js


Más próximos tutoriales: