Modules de chargement paresseux dans Next.js

Comment charger des modules paresseux dans votre application Next.js

Être capable d'analyser visuellement un bundle est formidable car nous pouvons optimiser notre application très facilement.

Supposons que nous devions charger la bibliothèque Moment dans nos articles de blog. Courir:

npm install moment

pour l'inclure dans le projet.

Simulons maintenant le fait que nous en avons besoin sur deux itinéraires différents:/bloget/blog/[id].

Nous l'importons danspages/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> ) }

J'ajoute simplement la date d'aujourd'hui, à titre d'exemple.

Cela inclura Moment.js dans le groupe de pages d'articles de blog, comme vous pouvez le voir en exécutantnpm run analyze:

Voyez que nous avons maintenant une entrée rouge dans/blog/[id], l'itinéraire auquel nous avons ajouté Moment.js!

Il est passé de ~ 1 ko à 350 ko, un gros problème. Et c'est parce que la bibliothèque Moment.js elle-même pèse 349 Ko.

La visualisation des bundles client nous montre maintenant que le plus gros bundle est celui de la page, qui était auparavant très petit. Et 99% de son code est Moment.js.

Chaque fois que nous chargeons un article de blog, tout ce code sera transféré au client. Ce qui n'est pas idéal.

Un correctif serait de rechercher une bibliothèque avec une taille plus petite, car Moment.js n'est pas connu pour être léger (en particulier hors de la boîte avec tous les paramètres régionaux inclus), mais supposons, pour le bien de l'exemple, que nous devons utiliser il.

Ce que nous pouvons faire à la place, c'est séparer tout le code Moment dans unbundle séparé.

Comment? Au lieu d'importer Moment au niveau du composant, nous effectuons une importation asynchrone à l'intérieurgetInitialProps, et nous calculons la valeur à envoyer au composant. N'oubliez pas que nous ne pouvons pas renvoyer d'objets complexes à l'intérieur dugetInitialProps()objet retourné, nous calculons donc la date à l'intérieur:

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

Voir cet appel spécial à.default()aprèsawait import? Il est nécessaire de référencer l'exportation par défaut dans une importation dynamique (voirhttps://v8.dev/features/dynamic-import)

Maintenant si nous couronsnpm run analyzeencore une fois, nous pouvons voir ceci:

Notre/blog/[id]bundle est encore une fois très petit, car Moment a été déplacé vers son propre fichier bundle, chargé séparément par le navigateur.

Téléchargez mon gratuitManuel Next.js


Plus de prochains tutoriels: