Next.js是一個新的通用JavaScript框架，它為基于React和服務器的Web應用提供了一個新的可選方案。
Next.js目前已經開源，https://zeit.co/blog/next
Next.js會自動進行代碼分割，它基于你的應用程序中的頁面。例如,如果你的一個模塊至少在你的頁面的一半使用，然后它進入到主JavaScript包中。如果沒有，該模塊將停留在頁面的包中。
這是一個相當不錯的默認設置。但有時，我們需要更好地控制加載模塊。例如，看看下面的場景:
- 我們正在建立一個基于official firebase API,的hacker news clone
- 我們在服務器上獲取數據來執行SSR，
- 當需要時，我們還會在客戶端獲取數據（當切換頁面）
：在本例中，我們的主應用程序包包含了 firebase 模塊，因為它在我們的所有頁面中都使用過。這是一個相當大的模塊。（超過了react,react-dom和next.js合在一起的大小 ）
但當到了客戶端時，我們只是在當用戶開始瀏覽不同的頁面時，需要它。因此，如果我們能夠在那個時候加載firebase模塊，我們就可以改進我們的應用程序的初始加載。
這正是我們在這堂課上要做的。
安裝
在這節課上，我們已經建立了一個非常基礎的hacker news clone。
下面是如何得到它的方法:
git clone https://github.com/arunoda/learnnextjs-demo.git
cd learnnextjs-demo
git checkout firebase-hn
然后你就可以運行這個應用了:
npm install
npm run dev
現在，訪問http://localhost:3000并嘗試應用程序。
分析
這款應用看起來是這樣的，它是一個非常基本的功能:
現在，讓我們試著了解一下我們的應用程序包里面是什么。
為此，只需運行以下命令:
npm run analyze
然后，它將啟動一個 webpack bundle analyzer 分析器，您將能夠檢查每個JavaScript包內部的內容。
因此，firebase模塊包含在哪里呢？
- inside commons.js bundle
- inside main.js bundle
- inside pages/index.js bundle
- in all pages
分析結果
正如您所看到的，firebase模塊保留在commons.js包。
這很簡單，因為它在我們應用的所有頁面中都使用過。
延遲加載
只有當用戶試圖導航到不同的頁面時，我們才使用firebase模塊。所以，如果我們能在那個時候加載firebase模塊，這對我們的應用來說是一個巨大的勝利。
幸運的是，我們可以很容易地做到這一點通過Next.js的動態導入功能。
讓我們開始吧。
與firebase相關的代碼位于lib/load-db.js文件中。這里是內容:
export default async () => {
const firebase = require('firebase')
try {
firebase.initializeApp({
databaseURL: 'https://hacker-news.firebaseio.com'
})
} catch (err) {
// we skip the "already exists" message which is
// not an actual error when we're hot-reloading
if (!/already exists/.test(err.message)) {
console.error('Firebase initialization error', err.stack)
}
}
return firebase.database().ref('v0')
}
這段代碼在每個頁面的getInitialProps函數中使用。
這是一個相當不錯的代碼，它使用require 加載firebase 模塊。
現在，我們要對上面的代碼做一個小的改動，當我們需要firebase模塊時。
// const firebase = require('firebase')
const firebase = await import('firebase')
在這里，我們使用import()函數來加載firebase模塊。它返回一個promise，我們使用await并resolve這個模塊。
嘗試應用上述更改并再次分析JavaScript包:
npm run analyze
然后，選擇firebase模塊所在的包的名稱。這可能是:
- commons.js
- main.js
- chunks/firebase.js
- chunks/firebase-[a-random-string].js
自己的包
正如你看到的，它有自己的bundle，它的名字看起來像:
chunks/firebase-[a-random-string].js
當您試圖導入firebase時，這個包就被加載了。
讓我們做個測試
現在讓我們試著看看它在瀏覽器中是如何工作的。
為此，我們需要運行我們的應用程序的生產版本，你可以這樣做:
npm run build
npm run start
然后，在瀏覽器中啟動該應用程序，該程序具有良好的網絡檢查調試器。(為了讓事情變得簡單，我建議你應該使用Chrome)
現在，在Chrome中加載http://localhost:3000并打開網絡檢查器。
然后，清除網絡檢查器中的當前數據。
你可以在上面的圖片中點擊紅色方塊的選擇圖標。
但是，如果瀏覽器版本發生了變化，那么位置可能就在不同的位置。
現在，單擊頁面上列出的任何標題。檢查網絡督察。
然后，點擊“Home”鏈接，再次進入首頁。檢查網絡督察。
你如何最好地描述你所檢查過的東西?
- “firebase” bundle loads every time
- “firebase” bundle loads only in the first time
- “firebase” bundle loads only in the second time
- “firebase” bundle never loads
測試結果
正如您所見，它只在您第一次瀏覽頁面時才加載。這就是實際發生的情況。
在第一次，pages/post.js 頁面的 getIntitialProps 導入firebase模塊(通過lib/load-db.js)。所以，這個應用程序加載了這個包。
即使是第二次，pages/index.js 頁面導入 firebase 模塊，但是在那個時候，它已經被加載了，并且沒有理由再加載它。
最后
坦率地說，這個示例并不是延遲加載的最佳用例。只是因為,
- 您需要在所有頁面中使用firebase模塊。
- 延遲加載的firebase模塊減小了主JavaScript包app.js的大小。但是它不會影響頁面加載時間，因為頁面是由服務器呈現的。
- 主JavaScript包的加載不會阻塞初始的HTML渲染。
這給我們帶來的唯一好處是快速的JavaScript交互，因為應用程序.js由于減小的大小而載入速度更快。
無論如何，這是一個很好的例子，我們可以演示延遲加載模塊。
因此，你可以在你的應用中使用它。
