Les offres groupées d'applications Next.js

Comment Next.js sépare le code de votre application en différents ensembles et que contiennent-ils

Lorsque vous affichez la source de la page d'une application Next.js, vous pouvez voir un tas de fichiers JavaScript en cours de chargement:

Commençons par mettre le code dans unFormateur HTMLpour mieux le formater, afin que nous, humains, ayons une meilleure chance de le comprendre:

<!DOCTYPE html>
<html>

<head> <meta charSet=“utf-8” /> <meta name=“viewport” content=“width=device-width,minimum-scale=1,initial-scale=1” /> <meta name=“next-head-count” content=“2” /> <link rel=“preload” href="/_next/static/development/pages/index.js?ts=1572863116051" as=“script” /> <link rel=“preload” href="/_next/static/development/pages/_app.js?ts=1572863116051" as=“script” /> <link rel=“preload” href="/_next/static/runtime/webpack.js?ts=1572863116051" as=“script” /> <link rel=“preload” href="/_next/static/runtime/main.js?ts=1572863116051" as=“script” /> </head>

<body> <div id="__next"> <div> <h1>Home page</h1></div> </div> <script src="/_next/static/development/dll/dll_01ec57fc9b90d43b98a8.js?ts=1572863116051"></script> <script id=NEXT_DATA type=“application/json”>{“dataManager”:"[]",“props”:{“pageProps”:{}},“page”:"/",“query”:{},“buildId”:“development”,“nextExport”:true,“autoExport”:true}</script> <script async="" data-next-page="/" src="/_next/static/development/pages/index.js?ts=1572863116051"></script> <script async="" data-next-page="/_app" src="/_next/static/development/pages/_app.js?ts=1572863116051"></script> <script src="/_next/static/runtime/webpack.js?ts=1572863116051" async=""></script> <script src="/_next/static/runtime/main.js?ts=1572863116051" async=""></script> </body>

</html>

Nous avons 4 fichiers JavaScript déclarés préchargés dans lehead, utilisantrel="preload" as="script":

  • /_next/static/development/pages/index.js(96 LOC)
  • /_next/static/development/pages/_app.js(5900 LOC)
  • /_next/static/runtime/webpack.js(939 LOC)
  • /_next/static/runtime/main.js(12k LOC)

Cela indique au navigateur de commencer à charger ces fichiers dès que possible, avant que le flux de rendu normal ne démarre. Sans ceux-ci, les scripts seraient chargés avec un délai supplémentaire, ce qui améliore les performances de chargement de la page.

Ensuite, ces 4 fichiers sont chargés à la fin de labody, avec/_next/static/development/dll/dll_01ec57fc9b90d43b98a8.js(31k LOC) et un extrait de code JSON qui définit certaines valeurs par défaut pour les données de la page:

<script id="__NEXT_DATA__" type="application/json">
{
  "dataManager": "[]",
  "props": {
    "pageProps":  {}
  },
  "page": "/",
  "query": {},
  "buildId": "development",
  "nextExport": true,
  "autoExport": true
}
</script>

Les 4 fichiers de bundle chargés implémentent déjà une fonctionnalité appeléefractionnement de code. Leindex.jsfichier fournit le code nécessaire pour leindexcomposant, qui sert le/route, et si nous avions plus de pages, nous aurions plus de bundles pour chaque page, qui ne seront alors chargés que si nécessaire - pour fournir un temps de chargement plus performant pour la page.

Téléchargez mon gratuitManuel Next.js


Plus de prochains tutoriels: