Paquetes de aplicaciones Next.js

Cómo Next.js separa el código de su aplicación en diferentes paquetes y qué contienen

Cuando ve la fuente de la página de una aplicación Next.js, puede ver que se cargan un montón de archivos JavaScript:

Comencemos poniendo el código en unFormateador HTMLpara formatearlo mejor, para que los humanos podamos tener una mejor oportunidad de entenderlo:

<!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>

Tenemos 4 archivos JavaScript que se declaran precargados en elhead, usandorel="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)

Esto le dice al navegador que comience a cargar esos archivos lo antes posible, antes de que comience el flujo de renderizado normal. Sin ellos, los scripts se cargarían con un retraso adicional y esto mejora el rendimiento de carga de la página.

Entonces esos 4 archivos se cargan al final delbody, junto con/_next/static/development/dll/dll_01ec57fc9b90d43b98a8.js(31k LOC) y un fragmento JSON que establece algunos valores predeterminados para los datos de la página:

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

Los 4 archivos de paquete cargados ya están implementando una función llamadadivisión de código. losindex.jsarchivo proporciona el código necesario para laindexcomponente, que sirve al/route, y si tuviéramos más páginas, tendríamos más paquetes para cada página, que luego solo se cargarán si es necesario, para proporcionar un tiempo de carga más eficiente para la página.

Descarga mi gratisManual de Next.js

Paquetes de aplicaciones Next.js

Cómo Next.js separa el código de su aplicación en diferentes paquetes y qué contienen

Más próximos tutoriales: