Next.js应用程序捆绑包

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 LOC)
  • /_next/static/runtime/webpack.js(939 LOC)
  • /_next/static/runtime/main.js(LOC为12k)

这告诉浏览器在正常渲染流程开始之前尽快开始加载这些文件。没有这些脚本,脚本将被额外延迟加载,从而提高了页面加载性能。

然后,将这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组件,用于/路由,并且如果我们有更多的页面,则每个页面都有更多的包,然后仅在需要时才进行加载-为页面提供更高效的加载时间。

免费下载我的Next.js手册


接下来的更多教程: