Módulos de carga diferida en Next.js

Cómo cargar módulos de forma diferida en su aplicación Next.js

Poder analizar visualmente un paquete es genial porque podemos optimizar nuestra aplicación muy fácilmente.

Digamos que necesitamos cargar la biblioteca Moment en nuestras publicaciones de blog. Correr:

npm install moment

para incluirlo en el proyecto.

Ahora simulemos el hecho de que lo necesitamos en dos rutas diferentes:/blogy/blog/[id].

Lo importamos enpages/blog/[id].js:

import moment from 'moment'

const Post = props => { return ( <div> <h1>{props.post.title}</h1> <p>Published on {moment().format(‘dddd D MMMM YYYY’)}</p> <p>{props.post.content}</p> </div> ) }

Solo agrego la fecha de hoy, como ejemplo.

Esto incluirá Moment.js en el paquete de la página de la publicación del blog, como puede ver al ejecutarnpm run analyze:

Vea que ahora tenemos una entrada roja en/blog/[id], la ruta a la que agregamos Moment.js.

Pasó de ~ 1kB a 350kB, bastante importante. Y esto se debe a que la biblioteca Moment.js en sí es de 349kB.

La visualización de paquetes de clientes ahora nos muestra que el paquete más grande es el de la página, que antes era muy pequeño. Y el 99% de su código es Moment.js.

Cada vez que cargamos una publicación de blog vamos a tener todo este código transferido al cliente. Lo que no es ideal.

Una solución sería buscar una biblioteca con un tamaño más pequeño, ya que Moment.js no es conocido por ser liviano (especialmente fuera de la caja con todas las configuraciones regionales incluidas), pero supongamos por el bien del ejemplo que debemos usar eso.

Lo que podemos hacer en cambio es separar todo el código de Momento en unpaquete separado.

¿Cómo? En lugar de importar Moment a nivel de componente, realizamos una importación asincrónica dentrogetInitialProps, y calculamos el valor para enviar al componente. Recuerde que no podemos devolver objetos complejos dentro delgetInitialProps()objeto devuelto, por lo que calculamos la fecha dentro de él:

import posts from '../../posts.json'

const Post = props => { return ( <div> <h1>{props.post.title}</h1> <p>Published on {props.date}</p> <p>{props.post.content}</p> </div> ) }

Post.getInitialProps = async ({ query }) => { const moment = (await import(‘moment’)).default() return { date: moment.format(‘dddd D MMMM YYYY’), post: posts[query.id] } }

export default Post

Ver esa llamada especial a.default()despuésawait import? Es necesario hacer referencia a la exportación predeterminada en una importación dinámica (consultehttps://v8.dev/features/dynamic-import)

Ahora si corremosnpm run analyzede nuevo, podemos ver esto:

Nuestra/blog/[id]paquete es de nuevo muy pequeño, ya que Moment se ha movido a su propio archivo de paquete, cargado por separado por el navegador.

Descarga mi gratisManual de Next.js


Más próximos tutoriales: