Analizador de Bundles

@next/bundle-analyzer es un plugin para Next.js que te ayuda a gestionar el tamaño de tus módulos JavaScript. Genera un reporte visual del tamaño de cada módulo y sus dependencias. Puedes usar esta información para eliminar dependencias grandes, dividir tu código o cargar solo algunas partes cuando sea necesario, reduciendo la cantidad de datos transferidos al cliente.

Instalación

Instala el plugin ejecutando el siguiente comando:

npm i @next/bundle-analyzer
# o
yarn add @next/bundle-analyzer
# o
pnpm add @next/bundle-analyzer

Luego, añade la configuración del analizador de bundles a tu next.config.js.

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

/** @type {import('next').NextConfig} */
const nextConfig = {}

module.exports = withBundleAnalyzer(nextConfig)

Analizando tus bundles

Ejecuta el siguiente comando para analizar tus bundles:

ANALYZE=true npm run build
# o
ANALYZE=true yarn build
# o
ANALYZE=true pnpm build

El reporte abrirá tres nuevas pestañas en tu navegador, las cuales puedes inspeccionar. Hacer esto regularmente durante el desarrollo y antes de desplegar tu sitio puede ayudarte a identificar bundles grandes de manera temprana, y diseñar tu aplicación para que sea más performante.