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 LOC)/_next/static/development/pages/_app.js(5900 LOC)/_next/static/runtime/webpack.js(939 LOC)/_next/static/runtime/main.js(12k LOC)
这告诉浏览器，在正常的渲染流程开始之前，尽快开始加载这些文件。如果没有这些文件，脚本的加载会有一个额外的延迟，这就提高了页面的加载性能。
然后，这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 组件所需的代码，它为/ 路径服务，如果我们有更多的页面，我们将为每个页面提供更多的捆绑文件，然后只有在需要时才会被加载 - 为页面提供一个更高性能的加载时间。
