在 Next.js 中透過動態匯入功能分割程式碼

瞭解如何運用程式碼分割和智慧載入策略，加快 Next.js 應用程式的運作速度。

Milica Mihajlija
Milica Mihajlija
X GitHub 首頁

發布日期：2019 年 11 月 8 日

瞭解不同類型的程式碼分割，以及如何使用動態匯入功能加快 Next.js 應用程式的速度。

以路徑和元件為基礎的程式碼分割

根據預設，Next.js 會將 JavaScript 分割成各個路徑的獨立區塊。使用者載入應用程式時，Next.js 只會傳送初始路徑所需的程式碼。使用者在應用程式中瀏覽時，會擷取與其他路徑相關聯的區塊。以路徑為基礎的程式碼分割功能可盡量減少需要一次剖析及編譯的指令碼數量，進而縮短網頁載入時間。

雖然以路徑為基礎的程式碼分割是不錯的預設做法，但您可以在元件層級分割程式碼，進一步最佳化載入程序。如果應用程式中有大型元件，建議您將其分割為獨立區塊。這樣一來，任何非重要的大型元件，或僅在特定使用者互動 (例如點選按鈕) 時算繪的元件，都可以延遲載入。

Next.js 支援動態 import()，可讓您動態匯入 JavaScript 模組 (包括 React 元件)，並將每個匯入項目載入為個別區塊。這樣一來，您就能在元件層級分割程式碼，並控管資源載入作業，讓使用者只下載瀏覽網站部分內容所需的程式碼。在 Next.js 中，這些元件預設會在伺服器端算繪 (SSR)。

動態匯入的實際運作方式

這篇文章包含多個版本的範例應用程式，這個應用程式由一個簡單的頁面和一個按鈕組成。點選按鈕後，畫面上就會顯示可愛的小狗。隨著您逐步瞭解各個應用程式版本，將會發現動態匯入與靜態匯入的不同之處，以及如何使用動態匯入。

在應用程式的第一個版本中，小狗住在 components/Puppy.js。如要在頁面上顯示小狗，應用程式會使用靜態 import 陳述式，在 index.js 中匯入 Puppy 元件：

import Puppy from "../components/Puppy";

如要查看 Next.js 如何將應用程式打包，請檢查開發人員工具中的網路追蹤記錄：

  1. 如要預覽網站，請按下「查看應用程式」，然後按下「全螢幕」圖示 全螢幕。

  2. 按下 `Control+Shift+J` 鍵 (在 Mac 上為 `Command+Option+J` 鍵) 開啟開發人員工具。

  3. 按一下 [網路] 分頁標籤。

  4. 勾選「停用快取」核取方塊。

  5. 請重新載入頁面。

載入網頁時，所有必要程式碼 (包括 Puppy.js 元件) 都會封裝在 index.js 中：

開發人員工具的「網路」分頁，顯示六個 JavaScript 檔案：index.js、app.js、webpack.js、main.js、0.js 和 dll (動態連結程式庫) 檔案。

按下「Click me」(按我) 按鈕時，只有小狗 JPEG 的要求會新增至「Network」(網路) 分頁：

按一下按鈕後，開發人員工具的「網路」分頁會顯示相同的六個 JavaScript 檔案和一張圖片。

這種做法的缺點是，即使使用者沒有點選按鈕查看小狗，也必須載入 Puppy 元件，因為該元件包含在 index.js 中。在這個小範例中，這並非大問題，但在實際應用程式中，只有在必要時才載入大型元件，通常是大幅改善效能的做法。

現在來看看第二個版本的應用程式，其中靜態匯入已替換為動態匯入。Next.js 包含 next/dynamic，因此您可以在 Next 中對任何元件使用動態匯入：

import Puppy from "../components/Puppy";
import dynamic from "next/dynamic";

// ...

const Puppy = dynamic(import("../components/Puppy"));

按照第一個範例的步驟檢查網路追蹤記錄。

首次載入應用程式時，系統只會下載 index.js。這次的檔案大小減少了 0.5 KB (從 37.9 KB 降至 37.4 KB)，因為檔案不包含 Puppy 元件的程式碼：

開發人員工具網路面板顯示相同的六個 JavaScript 檔案，但 index.js 現在小了 0.5 KB。

Puppy 元件現在位於獨立的區塊 1.js 中，只有在按下按鈕時才會載入：

按一下按鈕後，開發人員工具的「網路」分頁會顯示額外的 1.js 檔案，以及新增至檔案清單底部的圖片。

在實際應用程式中，元件通常大得多，延遲載入元件可減少數百 KB 的初始 JavaScript 酬載。

使用自訂載入指標的動態匯入

延遲載入資源時，建議您提供載入指標，以防發生任何延遲。在 Next.js 中，您可以為 dynamic() 函式提供額外引數，藉此完成這項操作：

const Puppy = dynamic(() => import("../components/Puppy"), {
  loading: () => <p>Loading...</p>
});

如要查看實際運作的載入指標，請在開發人員工具中模擬緩慢的網路連線：

  1. 如要預覽網站，請按下「查看應用程式」，然後按下「全螢幕」圖示 全螢幕。

  2. 按下 `Control+Shift+J` 鍵 (在 Mac 上為 `Command+Option+J` 鍵) 開啟開發人員工具。

  3. 按一下 [網路] 分頁標籤。

  4. 勾選「停用快取」核取方塊。

  5. 在「Throttling」(節流) 下拉式清單中，選取「Fast 3G」(快速 3G)。

  6. 按下「按我」按鈕。

現在點選按鈕時，系統需要一段時間載入元件，應用程式也會在這段期間顯示「載入中…」訊息。

深色畫面，顯示「

不含 SSR 的動態匯入

如要只在用戶端算繪元件 (例如即時通訊小工具)，請將 ssr 選項設為 false：

const Puppy = dynamic(() => import("../components/Puppy"), {
  ssr: false,
});

結論

Next.js 支援動態匯入，可提供元件層級的程式碼分割，盡可能減少 JavaScript 酬載，並縮短應用程式載入時間。根據預設，所有元件都會在伺服器端算繪，您也可以視需要停用這個選項。