Cómo optimizar el empaquetado de paquetes

El empaquetado de paquetes externos puede mejorar significativamente el rendimiento de su aplicación. Por defecto, los paquetes importados dentro de Componentes del Servidor (Server Components) y Manejadores de Ruta (Route Handlers) son empaquetados automáticamente por Next.js. Esta página le guiará sobre cómo analizar y optimizar aún más el empaquetado de paquetes.

Análisis de paquetes JavaScript

@next/bundle-analyzer es un complemento para Next.js que le ayuda a gestionar el tamaño de los paquetes de su aplicación. Genera un informe visual del tamaño de cada paquete y sus dependencias. Puede usar esta información para eliminar dependencias grandes, dividir o cargar de forma diferida (lazy-load) su código.

Instalación

Instale el complemento ejecutando el siguiente comando:

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

Luego, agregue la configuración del analizador de paquetes a su next.config.js.

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

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

module.exports = withBundleAnalyzer(nextConfig)

Generación de un informe

Ejecute el siguiente comando para analizar sus paquetes:

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

El informe abrirá tres nuevas pestañas en su navegador, las cuales puede inspeccionar. Evaluar periódicamente los paquetes de su aplicación puede ayudarle a mantener el rendimiento de la aplicación con el tiempo.

Optimización de importaciones de paquetes

Algunos paquetes, como bibliotecas de iconos, pueden exportar cientos de módulos, lo que puede causar problemas de rendimiento en desarrollo y producción.

Puede optimizar cómo se importan estos paquetes agregando la opción optimizePackageImports a su next.config.js. Esta opción solo cargará los módulos que realmente use, mientras mantiene la conveniencia de escribir declaraciones de importación con muchas exportaciones nombradas.

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    optimizePackageImports: ['icon-library'],
  },
}

module.exports = nextConfig

Next.js también optimiza automáticamente algunas bibliotecas, por lo que no necesitan incluirse en la lista de optimizePackageImports. Consulte la lista completa.

Exclusión de paquetes específicos del empaquetado

Dado que los paquetes importados dentro de Componentes del Servidor (Server Components) y Manejadores de Ruta (Route Handlers) son empaquetados automáticamente por Next.js, puede excluir paquetes específicos del empaquetado usando la opción serverExternalPackages en su next.config.js.

/** @type {import('next').NextConfig} */
const nextConfig = {
  serverExternalPackages: ['package-name'],
}

module.exports = nextConfig

Next.js incluye una lista de paquetes populares que actualmente están trabajando en compatibilidad y se excluyen automáticamente. Consulte la lista completa.