Next.js application bundle

How Next.js divides your application code into different bundles and what do they contain

When you look at the page source code of the Next.js application, you will see a bunch of JavaScript files being loaded:

Let's put the code firstHTML formatterMake it better format so that we humans can understand it better:

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

We have 4 JavaScript files declared to be pre-loaded intohead, Userel="preload" as="script":

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

This tells the browser to start loading these files as soon as possible before the normal rendering process begins. Without these scripts, scripts will be additionally delayed in loading, thereby improving page loading performance.

Then, load these 4 files intobody, along with/_next/static/development/dll/dll_01ec57fc9b90d43b98a8.js(31k LOC), and a JSON code snippet that sets some default values for web page data:

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

The 4 bundle files that have been loaded have implemented an item calledCode split. Thisindex.jsThe file provides the required codeindexComponents for/Routing, and if we have more pages, each page has more packages, and then only load when needed-to provide pages with more efficient loading times.

Download mine for freeNext.js manual

Next.js application bundle

How Next.js divides your application code into different bundles and what do they contain

More tutorials next: