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（12k行代碼）

這告訴瀏覽器在正常渲染流程開始之前盡快開始加載這些文件。沒有這些文件，腳本將會有額外的延遲加載，這將提高頁面的加載性能。

然後這4個文件與/_next/static/development/dll/dll_01ec57fc9b90d43b98a8.js（31k行代碼）一起在body的末尾加載，還有一個JSON片段，用於設置頁面數據的一些默認值：

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

加載的這4個捆綁包文件已經實現了一個名為代碼拆分的功能。index.js文件提供了index組件所需的代碼，它服務於/路由，如果我們有更多的頁面，我們將為每個頁面有更多的捆綁包，只有在需要時才會加載，以提供更高效的頁面加載時間。