Next.js應用程序捆綁
Next.js如何將你的應用程序代碼分成不同的捆綁包，以及它們包含了什麼。
當你查看Next.js應用程序的頁面源碼時，你會看到一堆JavaScript文件正在被加載。
![]()
讓我們首先將代碼放入一個HTML格式化器中，這樣我們人類可以更好地理解它。
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>
|
我們有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（12k行代碼）
這告訴瀏覽器在正常渲染流程開始之前盡快開始加載這些文件。沒有這些文件，腳本將會有額外的延遲加載，這將提高頁面的加載性能。
然後這4個文件與/_next/static/development/dll/dll_01ec57fc9b90d43b98a8.js（31k行代碼）一起在body的末尾加載，還有一個JSON片段，用於設置頁面數據的一些默認值：
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>
|
加載的這4個捆綁包文件已經實現了一個名為代碼拆分的功能。index.js文件提供了index組件所需的代碼，它服務於/路由，如果我們有更多的頁面，我們將為每個頁面有更多的捆綁包，只有在需要時才會加載，以提供更高效的頁面加載時間。
tags: [“Next.js”, “app bundles”, “code splitting”]
