Пакеты приложений Next.js

Как Next.js разделяет код вашего приложения на разные пакеты и что они содержат

Когда вы просматриваете исходный код страницы приложения Next.js, вы можете видеть, что загружается куча файлов JavaScript:

Начнем с помещения кода вСредство форматирования HTMLчтобы лучше отформатировать его, чтобы у людей было больше шансов понять это:

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

У нас есть 4 файла JavaScript, которые объявлены предварительно загруженными вhead, с помощьюrel="preload" as="script":

  • /_next/static/development/pages/index.js(96 мест)
  • /_next/static/development/pages/_app.js(5900 мест)
  • /_next/static/runtime/webpack.js(939 мест)
  • /_next/static/runtime/main.js(12 тыс. Мест)

Это говорит браузеру начать загрузку этих файлов как можно скорее, до того, как начнется нормальный поток рендеринга. Без них скрипты загружались бы с дополнительной задержкой, и это улучшило бы скорость загрузки страницы.

Затем эти 4 файла загружаются в конецbody, вместе с/_next/static/development/dll/dll_01ec57fc9b90d43b98a8.js(31k LOC) и фрагмент JSON, который устанавливает некоторые значения по умолчанию для данных страницы:

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

Загруженные 4 файла пакета уже реализуют одну функцию, называемуюразделение кода. Вindex.jsфайл содержит код, необходимый дляindexкомпонент, который обслуживает/route, и если бы у нас было больше страниц, у нас было бы больше пакетов для каждой страницы, которые затем будут загружаться только в случае необходимости - чтобы обеспечить более эффективное время загрузки для страницы.

Скачать мою бесплатнуюСправочник Next.js


Больше следующих руководств: