Как 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
Больше следующих руководств:
- Начало работы с Next.js
- Next.js против Gatsby против приложения create-react-app
- Как установить Next.js
- Связывание двух страниц в Next.js с помощью Link
- Динамический контент в Next.js с роутером
- Передача данных в компонент Next.js с помощью getInitialProps
- Стилизация компонентов Next.js с помощью CSS
- Предварительная загрузка содержимого в Next.js
- Использование роутера для обнаружения активной ссылки в Next.js
- Просмотрите источник, чтобы подтвердить, что SSR работает в Next.js
- Next.js: заполните тег заголовка настраиваемыми тегами
- Развертывание приложения Next.js прямо сейчас
- Next.js: запускать код только на стороне сервера или на стороне клиента в Next.js
- Развертывание приложения Next.js в рабочей среде
- Как анализировать пакеты приложений Next.js
- Ленивая загрузка модулей в Next.js
- Добавление компонента-оболочки в приложение Next.js
- Значки, добавленные Next.js в ваше приложение
- Пакеты приложений Next.js
- Как использовать маршрутизатор Next.js
- Как использовать маршруты API Next.js
- Как получить файлы cookie на стороне сервера в приложении Next.js
- Как изменить порт приложения Next.js