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 en su aplicación no se empaquetan. Esto puede afectar el rendimiento o podría no funcionar si los paquetes externos no están pre-empaquetados, por ejemplo, si se importan desde un monorepo o node_modules. Esta página le guiará sobre cómo analizar y configurar 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.

Empaquetado de paquetes específicos

Para empaquetar paquetes específicos, puede usar la opción transpilePackages en su next.config.js. Esta opción es útil para empaquetar paquetes externos que no están pre-empaquetados, por ejemplo, en un monorepo o importados desde node_modules.

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

module.exports = nextConfig

Empaquetado de todos los paquetes

Para empaquetar automáticamente todos los paquetes (comportamiento predeterminado en el Enrutador de Aplicación - App Router), puede usar la opción bundlePagesRouterDependencies en su next.config.js.

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

module.exports = nextConfig

Exclusión de paquetes específicos del empaquetado

Si tiene habilitada la opción bundlePagesRouterDependencies, puede excluir paquetes específicos del empaquetado automático usando la opción serverExternalPackages en su next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
  // Empaquetar automáticamente paquetes externos en el Enrutador de Páginas (Pages Router):
  bundlePagesRouterDependencies: true,
  // Excluir paquetes específicos del empaquetado para ambos enrutadores (App y Pages Router):
  serverExternalPackages: ['package-name'],
}

module.exports = nextConfig