Cómo analizar los paquetes de aplicaciones de Next.js

Nota del editor:Timonwa Akintokun actualizó esta publicación el 14 de mayo de 2024 para cubrir técnicas avanzadas para trabajar con paquetes de aplicaciones, como ajustar manualmente las configuraciones de webpack para un control de paquete más preciso, agregar información sobre cómo abrir e inspeccionar archivos de paquete y explorar configuraciones de webpack personalizadas para optimizar el paquete.

Un aspecto crucial de cualquier aplicación web es el tamaño y el rendimiento de su código base. Next.js es un framework JavaScript popular para crear aplicaciones React renderizadas en servidor y exportadas estáticamente.

Next.js permite optimizar automáticamente el código de una aplicación y minimizar el tamaño de su paquete. Esto puede reducir la cantidad de datos que deben transferirse al cliente, mejorando así el rendimiento. Sin embargo, analizar periódicamente el paquete de tu aplicación Next.js puede ayudarte a garantizar que esté lo más optimizado posible e identificar posibles áreas de mejora.

En este artículo, explicaremos qué es un paquete de aplicación Next.js y cómo funcionan las herramientas de análisis de paquetes. Demostraremos cómo usar el paquete analizador @next/bundle para inspeccionar los paquetes de aplicación Next.js y presentaremos algunas alternativas. Por último, explicaremos cómo usar el análisis de paquetes para mejorar el rendimiento de las aplicaciones Next.js.

¿Qué es un paquete de aplicaciones Next.js?

Al crear una aplicación Next.js, el código se organiza en pequeñas unidades llamadas módulos. Estos módulos se agrupan mediante webpack, un popular empaquetador de módulos JavaScript, para formar un único archivo llamado paquete. Este paquete se envía al navegador del cliente, que se ejecuta para renderizar la aplicación.

A medida que las aplicaciones web se vuelven más complejas y ricas en funciones, el tamaño de su código fuente puede aumentar significativamente. Esto puede provocar tiempos de carga más lentos, lo que puede frustrar a los usuarios y afectar negativamente al rendimiento de la aplicación.

Además, las bases de códigos más grandes suelen ser más difíciles de mantener, lo que dificulta la identificación y corrección de errores. Al analizar los paquetes de aplicaciones, puedes identificar áreas donde puedes optimizar tu código para reducir su tamaño y mejorar su rendimiento.

Existen varios empaquetadores, pero este artículo se centrará en el uso de una de las herramientas de empaquetado más populares, el paquete @next/bundle-analyzer basado en webpack.

¿Qué es @next/bundle-analyzer?

El paquete @next/bundle-analyzer es un complemento para el framework Next.js que permite analizar el tamaño y la composición del paquete de la aplicación. Al identificar bloques de códigos grandes o innecesarios, se puede reducir el tamaño total del paquete, lo que ayuda a optimizar el rendimiento de la aplicación Next.js.

El complemento bundle-analyzer genera un informe visual que proporciona información sobre el tamaño y el contenido del paquete de su aplicación, lo que facilita la identificación de áreas de optimización. @next/bundle-analyzer genera un archivo HTML estático que contiene un informe detallado sobre la base de código de su aplicación, incluida información sobre el tamaño de cada componente y sus dependencias.

Instalación de @next/bundle-analyzer

Para usar el paquete @next/bundle-analyzer, debes instalarlo en un proyecto Next.js existente. En este tutorial, usaré mi proyecto de código abierto, Tech Career Roadmap, como proyecto de ejemplo de Next.js.

Para comenzar, instale el paquete con npm o Yarn:

# npmnpm install -- guardar - dev @next / bundle - analizador multientorno# Hilohilo agregar - D @next / analizador - de - paquetes entorno cruzado

Notarás que también lo instalarás cross-env; Usaremos este paquete más adelante en este artículo para configurar una variable de entorno. El paquete cross-env nos permitirá configurar variables de entorno al ejecutar scripts en nuestro package.jsonarchivo sin errores, independientemente de la sintaxis específica de la plataforma o del sistema operativo.

Configuración de la aplicación Next.js

Después de haber instalado los paquetes, puede habilitar el analizador de paquetes agregando el siguiente código a su next.config.jsarchivo:

constante conBundleAnalyzer = require ( '@next/bundle-analyzer' )({ habilitado : proceso . env . ANALIZAR === 'verdadero' , })m ó dulo . exportaciones = conBundleAnalyzer ({ // su configuración de Next.js})

Análisis de los paquetes de aplicaciones Next.js

Para ejecutar un análisis de tus paquetes de aplicaciones, deberás iniciar tu aplicación Next.js en modo de desarrollo con la ANALYZEvariable de entorno establecida en true. Luego, ejecuta el siguiente comando para ver el análisis:

ANALIZAR = verdadero npm ejecutar compilaci ó n

Este comando automáticamente:

1. Crea una analyzecarpeta en tu .nextcarpeta dentro de tu directorio raíz y crea tres archivos: client.html, nodejs.html, yedge.html
2. Abra los tres archivos en su navegador; el client.htmlarchivo representa el lado del cliente y el nodejs.htmlarchivo representa el lado del servidor. Al momento de escribir esto, no se han proporcionado datos para la Edge.htmlpágina. Probablemente representará las API de borde, pero no hemos podido obtener confirmación de los encargados del paquete.
3. Proporciona información de análisis de paquetes en tu terminal.

Una vez ejecutado el analizador de paquetes, puedes comenzar a inspeccionar tus paquetes:

Inspeccionando los paquetes de aplicaciones Next.js

El paquete @next/bundle-analyzer ofrece varias maneras de inspeccionar tus paquetes: mediante la terminal, el navegador y el filtro de la barra lateral. Analizamos estos diferentes métodos.

A través de la terminal

En la imagen superior, que muestra la salida del terminal, hay una tabla que muestra la página, el tamaño y el código JavaScript de primera carga. Bajo el encabezado “Página”, se encuentra una lista de todas las páginas de la aplicación Next.js y fragmentos del paquete de código JavaScript de primera carga.

El paquete JS de Primera Carga contiene todo el código compartido o utilizado por las páginas de la aplicación durante la carga inicial. En el encabezado “Tamaño”, el paquete muestra el tamaño de archivo de cada página, paquete y los fragmentos que lo componen.

En el código JavaScript de primera carga,puede ver el tamaño final de la página o después de agregarlo. El tamaño del código JavaScript de primera carga también corresponde al tamaño de las páginas al momento de la carga inicial.

Next.js también codifica estos tamaños por colores. El verde indica que el tamaño es pequeño y correcto, mientras que el rojo indica que es demasiado grande. Si el tamaño de tu paquete First Load JS se muestra en rojo, intenta reducirlo hasta que se muestre en verde, ya que el tamaño del paquete también afecta el tamaño y el estado de todas tus páginas.

A través del navegador

Para inspeccionar sus paquetes de aplicaciones en su navegador, simplemente vaya a su navegador para ver dos páginas abiertas por el analizador.

La primera página, client.htmlmuestra todos los paquetes para el lado del cliente:

La segunda página, nodejs.htmlmuestra todos los paquetes del lado del servidor:

Si las páginas de tu aplicación no se cargan automáticamente o si ya has cerrado el navegador, simplemente ve a la analyzecarpeta y haz clic derecho en cualquier nombre de archivo para abrirlos en tu navegador.

A continuación, simplemente pase el cursor sobre cualquiera de los paquetes para ver sus estadísticas. Podrá ver el tamaño de las estadísticas, el tamaño analizado y el tamaño comprimido de cada paquete,así como su ruta de archivo.

Interpretación de la salida del analizador de paquetes.

• Rectángulos: Cada rectángulo representa un módulo o paquete. El tamaño de un rectángulo indica cuán grande o pequeño es el módulo o paquete en comparación con los demás del conjunto. Por lo tanto, cuanto más grande sea el rectángulo, mayor será su tamaño, y viceversa.
• Agrupación por colores: Los archivos o módulos que están relacionados se agrupan por colores
• Mercadoel cursor sobre cualquier rectángulo muestra las estadísticas relacionadas con ese módulo
• Al hacer clic: Al hacer clic en un módulo, se amplía su vista, lo que permite obtener una vista más detallada, especialmente si contiene muchos módulos o archivos anidados. Al hacer clic en un espacio vacío, se reduce la vista.
• Tamaño de la estadística: el tamaño del paquete de JavaScript cuando se entrega al cliente; este es el tamaño del código JavaScript que el navegador web del cliente debe descargar y ejecutar para ejecutar la aplicación
• Tamaños analizados: el tamaño del paquete después de que el navegador web lo haya analizado; esta es la cantidad de memoria que ocupa el código JavaScript en el navegador web después de haber ejecutado el código.
• Tamaño comprimido: El tamaño del paquete JavaScript comprimido con el algoritmo Gzip; esta es la cantidad de datos que el navegador web del cliente debe descargar para ejecutar la aplicación. Gzip es un algoritmo de compresión común que se utiliza para reducir el tamaño de recursos web, como archivos JavaScript. Puede reducir significativamente la cantidad de datos transferidos por la red.

Con las páginas del analizador en el navegador, podrás ver qué paquetes ocupan más espacio según su tipo de tamaño. Además, los paquetes se organizan según el tamaño de sus archivos:

También puede hacer clic derecho en el paquete raíz para ver las opciones relacionadas con ese fragmento. Puede hacer clic en ”Ocultar fragmentos”para ocultar ese fragmento en particular y ver el resto, haga clic en“Ocultar todos los demás fragmentos”para ocultar todos los demás fragmentos excepto el que hizo clic o hacer clic en ”Mostrar todos los fragmentos”para ver todos los fragmentos que están ocultos actualmente.

Usando el filtro de la barra lateral

Otra forma de interactuar con tus paquetes e inspeccionarlos es usar el filtro de la barra lateral. En ella, puedes especificar un paquete o conjunto de paquetes que quieras ver.

Este enfoque puede ser útil para visualizar e inspeccionar rápidamente paquetes más pequeños. También puede ordenarlos según el tipo de tamaño: estadístico, analizado o comprimido.

Puede buscar módulos utilizando un archivo, una carpeta o una frase en particular desde su aplicación; el analizador mostrará resultados basados ​​en su entrada de búsqueda:

O bien, puede seleccionar un punto de entrada para los fragmentos iniciales (es decir, cualquiera de las páginas de su aplicación):

Creación de un comando/script de análisis

Para ahorrar tiempo, también puede crear un comando o script rápido para ejecutarlo en su package.jsonarchivo. De esta manera, evitará tener que configurar la variable de entorno en cada llamada.

En su package.jsonarchivo, agregue el siguiente script:

"guiones" : { … "analyze" : "cross-env ANALYZE=true próxima compilación" },

Como mencioné anteriormente, cross-envnos permite configurar variables de entorno en nuestro package.jsonarchivo. En este caso, las configuramos ANALYZEen [nombre del archivo] true. Si usaba un sistema operativo Windows y no instaló [nombre del archivo] cross-env, obtendría un error como el que se muestra a continuación al ejecutar el script anterior:

Ahora, probamos nuestro código ejecutando uno de los siguientes comandos:

# npmnpm ejecutar analizar# Hiloun análisis de hilo

Ejecutar cualquiera de los comandos anteriores da como resultado la misma acción que ejecutar el siguiente:

ANALIZAR = verdadero npm ejecutar compilaci ó n

Técnicas avanzadas para trabajar con paquetes de aplicaciones.

Además de usar herramientas de análisis de paquetes, existen técnicas avanzadas que puedes usar para optimizar los paquetes de tu aplicación Next.js. Veamos algunos ejemplos.

Personalizando las configuraciones de tu webpack en Next.js

Anteriormente en este artículo, modificamos la configuración de Next.js agregando @next/bundle-analyzer a nuestro next.config.jsarchivo, lo que nos permitió analizar los paquetes de aplicaciones. También podemos usarlo para modificar la configuración de nuestro paquete web agregando cargadores, complementos u otras configuraciones de optimización. Sin embargo, antes de añadirlos, debes asegurarte de que Next.js no esté gestionando dichas optimizaciones.

Para personalizar la configuración de webpack, simplemente agregue la webpackpropiedad a su next.config.jsarchivo y pásele sus configuraciones:

módulo. exportaciones = {​​ ​​paquete web : ( config , { isServer } ) = { si (! esServidor ) { config.optimization.splitChunks.cacheGroups = {​​​​​​ proveedor : { prueba : /[/]módulos_de_nodo[/]/ , nombre : 'vendedores' , trozos : 'todos' , }, } } configuración de retorno },}

En el fragmento de código anterior, modificamos la configuración de webpack dividiendo las bibliotecas del proveedor en un fragmento separado para el paquete del lado del cliente. Este ejemplo muestra cómo personalizar webpack para gestionar el tamaño de los paquetes.

División de código para reducir los tiempos de carga

La división de código consiste en dividir el código en pequeños fragmentos que se pueden cargar cuando sea necesario. Es una técnica muy útil, especialmente en aplicaciones grandes, ya que reduce la carga inicial de las páginas.

Next.js ya lo hace automáticamente, permitiendo que solo se cargue el código necesario para renderizar la página. Sin embargo, también puedes optimizar tus páginas manualmente mediante importaciones dinámicas. Aquí tienes un ejemplo:

importar dinámico desde 'next/dynamic' ;constante DynamicComponent = dynamic ( () = import ( '../components/DynamicComponent' ), { cargando : () = p Cargando ... / p , });exportar función predeterminada Página () { devolver DynamicComponent / ;​}

Aquí DynamicComponentsolo se cargará cuando sea necesario, por lo que no aumenta el tiempo de carga de la página.

Reemplazar bibliotecas pesadas por alternativas más ligeras

También puedes reducir el tamaño de tus paquetes de aplicaciones reemplazando bibliotecas pesadas por otras más ligeras. Por ejemplo, si usabas bibliotecas moment.jspara gestionar fechas en tu aplicación, podrías considerar cambiarlas a date-fnso day.js, que son más pequeñas que moment.js.

De igual forma, si usas una biblioteca que solo necesita un componente, pero terminas importando la biblioteca completa, lo mejor sería importar solo el módulo específico que necesitas. Por ejemplo, en lugar de importar toda la biblioteca lodash, puedes importar solo las funciones necesarias:

// En lugar de esto:importar _ de 'lodash' ;//Haz esto:importar rebote desde 'lodash/debounce' ;

Esto garantiza que solo las partes de la biblioteca necesarias se incluyan en su paquete, reduciendo significativamente su tamaño.

Uso debuggerpara encontrar problemas en paquetes de Next.js

Puedes usar la debuggersentencia para encontrar problemas en tu paquete. Añadir la debuggersentencia a tu código te permite depurar el código del lado del cliente. Al iniciar el servidor con npm run devo yarn devy se llama a la sentencia, el navegador pausa la ejecución del código, lo que te permite inspeccionar el código hasta ese punto en las DevTools del navegador.

Para depurar en el servidor, debe incluir la --inspectbandera en su script de desarrollo. Puede hacerlo actualizando su package.jsonscript de la siguiente manera:

{ "guiones" : { "dev" : "NODE_OPTIONS='--inspeccionar' siguiente dev" }}

Luego, reinicia tu servidor de desarrollo con npm run devo yarn dev. Verás algo similar a esto en tu terminal:

A continuación, ábrela chrome://inspecten Chrome. Verás tu aplicación Next.js en la secciónDestino RemotoHaz clic enInspeccionarpara abrirla en una ventana independiente de Chrome DevTools:

Luego, haga clic en la pestañaFuentese inspeccione su aplicación como lo haría en el lado del cliente:

Puedes usar el panel Fuentes para establecer puntos de interrupción, inspeccionar variables y revisar paso a paso tu código del lado del servidor. Esto te ayuda a identificar y resolver problemas en tu paquete.

Optimizar el rendimiento de las aplicaciones con el análisis de paquetes

El análisis de paquetes es una herramienta esencial para optimizar el rendimiento de las aplicaciones. Ayuda a identificar posibles cuellos de botella y áreas para mejorar la velocidad de carga de una aplicación y reducir el tamaño de su paquete. Exploremos algunos consejos que puede usar para identificar problemas con el informe de análisis de paquetes:

• Detectar dependencias grandes : inspeccione los módulos grandes para ver cuáles son paquetes de terceros y luego busque paquetes alternativos que sean de menor tamaño.
• Detección de código duplicado : Si una biblioteca o módulo aparece varias veces en el paquete, es posible que haya diferentes versiones de esa biblioteca instaladas en la aplicación. Verifique y elimine la versión que no esté usando.
• Análisis de las métricas de tamaño del paquete : Si el tamaño de las estadísticas de un módulo es grande, debería considerar optimizarlo. Un tamaño analizado grande también puede afectar el uso de memoria y el rendimiento de la aplicación. Un tamaño comprimido grande puede afectar los tiempos de carga de sus páginas.
• Identificación de código no utilizado : La optimización de árbol puede eliminar código no utilizado, pero a veces puede haber casos en los que tenga código inalterable. Revise su informe de análisis para confirmar que no haya código no utilizado en su paquete y excluya manualmente cualquier código encontrado modificando la configuración de webpack en su, next.config.jspor ejemplo.
• Uso de mapas de origen : Los mapas de origen como source-map-explorer pueden ayudarle a mapear su código minimizado a su código fuente original. Esto es útil para depurar errores, donde necesita identificar los archivos que contribuyen al código minimizado.

Considere este escenario en el que se analizó una aplicación Next.js con la herramienta @next/bundle-analyzer y se identificaron los siguientes problemas:

• Tamaños de archivos de imagen grandes : esto puede reducir la velocidad de carga de una aplicación.
• Paquetes npm duplicados : esto aumentará innecesariamente el tamaño del paquete de la aplicación
• Paquetes npm no utilizados : esto contribuirá al tamaño del paquete de la aplicación y reducirá su velocidad de carga.
• Archivos JavaScript pesados : los archivos JavaScript no optimizados aumentarán el tamaño del paquete de una aplicación

Para optimizar el rendimiento de la aplicación, aquí hay algunas formas posibles de abordar los problemas mencionados anteriormente:

• Comprimir o redimensionar imágenes con archivos de gran tamaño
• Eliminar paquetes npm duplicados
• Eliminar paquetes npm no utilizados
• Utilice la minificación, la sacudida de árboles y la división de código para optimizar los archivos JavaScript

Alternativas a @next/bundle-analyzer

Si bien @next/bundle-analyzer es una opción popular para analizar el tamaño del paquete de una aplicación Next.js, existen otras opciones. Aquí hay algunas alternativas a considerar:

• analizador de paquetes web : Esta herramienta ampliamente utilizada analiza el tamaño del paquete de aplicaciones basadas en webpack, incluyendo Next.js. Genera visualizaciones interactivas del tamaño y la composición del paquete, lo que facilita la identificación de los módulos que ocupan más espacio.
• next-bundle-analyzer : esta alternativa impulsada por la comunidad al paquete oficial @next/bundle-analyzer proporciona una funcionalidad similar pero con informes personalizados específicamente para usuarios de Next.js
• source-map-explorer : Esta popular herramienta analiza el tamaño del paquete de una aplicación examinando los mapas de origen generados durante el proceso de compilación. Proporciona una visualización en árbol del tamaño del paquete e identifica la procedencia de cada byte de código.
• Statoscope : Esta herramienta web analiza el tamaño y la composición de los paquetes webpack. Ofrece una interfaz sencilla para que los usuarios carguen archivos de estadísticas webpack y generen visualizaciones que ayudan a identificar qué módulos y dependencias contribuyen más al tamaño del paquete de la aplicación.

Estas son solo algunas de las muchas opciones disponibles para analizar el tamaño del paquete de una aplicación Next.js. Considere experimentar con diferentes herramientas para encontrar la que mejor se adapte a sus necesidades.

Conclusión

En este artículo, explicamos qué es un paquete de Next.js e investigamos cómo su tamaño puede afectar el rendimiento del sitio web. También mostramos cómo usar el paquete @next/bundle-analyzer para analizar e inspeccionar los paquetes de diversas maneras, como en la terminal, el navegador y el filtro de la barra lateral de la herramienta.

Additionally, we covered some advanced techniques for working with app bundles, like customizing webpack configurations, implementing code splitting, and replacing heavy libraries with lighter alternatives, along with some tips and tricks you can implement when inspecting your bundle analysis for issues and improving performance.

Through this analysis, you’ll identify potential bottlenecks, such as duplicated or unused npm packages and large image sizes. You’ll be able to optimize your app’s performance by reducing bundle size and improving load speed. Bundle analysis is a critical tool for any developer looking to optimize their Next.js application and enhance user experience.

Debugging Next applications can be difficult, especially when users experience issues that are difficult to reproduce. If you’re interested in monitoring and tracking state, automatically surfacing JavaScript errors, and tracking slow network requests and component load time, try LogRocket.

El paquete de middleware LogRocket Redux añade una capa adicional de visibilidad a las sesiones de usuario. LogRocket registra todas las acciones y el estado de los almacenes Redux.

Modernice su forma de depurar sus aplicaciones Next.js: comience a monitorearlas de forma gratuita.

Si quieres conocer otros artículos parecidos a Cómo analizar los paquetes de aplicaciones de Next.js puedes visitar la categoría Aplicaciones.