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手冊
接下來的更多教程:
- Next.js入門
- Next.js vs Gatsby vs create-react-app
- 如何安裝Next.js
- 使用鏈接在Next.js中鏈接兩個頁面
- 路由器中Next.js中的動態內容
- 使用getInitialProps將數據饋送到Next.js組件
- 使用CSS樣式化Next.js組件
- 在Next.js中預取內容
- 使用路由器檢測Next.js中的活動鏈接
- 查看源代碼以確認SSR在Next.js中正常工作
- Next.js:使用自定義標籤填充head標籤
- 立即部署Next.js應用程序
- Next.js:僅在Next.js的服務器端或客戶端運行代碼
- 在生產中部署Next.js應用
- 如何分析Next.js應用程序捆綁包
- Next.js中的延遲加載模塊
- 向您的Next.js應用添加包裝器組件
- Next.js添加到您的應用程序中的圖標
- Next.js應用程序捆綁包
- 如何使用Next.js路由器
- 如何使用Next.js API路由
- 如何在Next.js應用中在服務器端獲取Cookie
- 如何更改Next.js應用程序端口