/

The Next.js App Bundles

The Next.js App Bundles

In a Next.js app, the code is divided into different bundles to enhance performance. These bundles are loaded as JavaScript files when you view the page source of the app.

To break down the code and make it more understandable, let’s use an HTML formatter:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!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>

There are four JavaScript files declared in the head section using rel="preload" and as="script":

  1. /_next/static/development/pages/index.js - 96 lines of code.
  2. /_next/static/development/pages/_app.js - 5900 lines of code.
  3. /_next/static/runtime/webpack.js - 939 lines of code.
  4. /_next/static/runtime/main.js - 12k lines of code.

By preloading these files, the browser starts loading them as soon as possible, improving page loading performance. Without this approach, scripts would have an additional delay.

At the end of the body section, these four bundle files are loaded along with /_next/static/development/dll/dll_01ec57fc9b90d43b98a8.js (31k LOC), and a JSON snippet that sets defaults for the page data:

1
2
3
4
5
6
7
8
9
10
11
12
13
<script id="__NEXT_DATA__" type="application/json">
{
 "dataManager": "[]",
 "props": {
 "pageProps": {}
 },
 "page": "/",
 "query": {},
 "buildId": "development",
 "nextExport": true,
 "autoExport": true
}
</script>

The loaded bundle files already implement a feature called code splitting. For example, the index.js file contains code specific to the index component, which serves the / route. If there were more pages, each page would have its own bundle file that would only be loaded when needed, thus improving the page’s load time.

tags: [“Next.js”, “app bundles”, “code splitting”, “performance optimization”]