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

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

Milica Mihajlija
Milica Mihajlija
X GitHub 首頁

您會學到什麼？

本文將介紹不同類型的程式碼 拆分方式 可使用動態匯入功能加快 Next.js 應用程式的運作速度。

依據路徑和元件的程式碼分割

根據預設，Next.js 會針對每個路徑將您的 JavaScript 拆分為不同的區塊。 當使用者載入應用程式時，Next.js 只會傳送 初始路徑。使用者瀏覽應用程式時，會擷取區塊 與其他路徑相關聯依據路徑的程式碼分割作業，可將 因而需要一次剖析和編譯的指令碼數量 縮短網頁載入時間

雖然路徑式程式碼分割是不錯的預設方式，但您仍可以進一步最佳化 在元件層級分割程式碼的載入程序如果您有大型資料集 最好把這些元件分成不同的區塊 如此一來，任何不關鍵或在 使用者互動 (例如點擊按鈕) 可以延遲載入。

Next.js 支援動態 import()， 可讓您匯入 JavaScript 模組 (包括 React 元件) 以個別區塊的形式動態載入每項匯入作業。這樣您就能 和元件層級的程式碼分割功能，以及控制資源載入作業 讓使用者只在網站的某些部分下載必要的程式碼 以及正在瀏覽的內容在 Next.js 中，這些元件會在伺服器端轉譯 (SSR) 根據預設。

動態匯入功能應用實例

這篇文章包含多個版本的範例應用程式，其中包含 。按下按鈕後，就會看到可愛的小狗。阿斯 各個應用程式版本之間 與靜態值不同 匯入作業 以及使用方式

在第一個應用程式版本中，小狗住在 components/Puppy.js。目的地： 在頁面中顯示小狗，應用程式會將 Puppy 元件匯入 包含靜態匯入陳述式的 index.js：

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

如要瞭解 Next.js 如何封裝應用程式，請在開發人員工具中檢查網路追蹤：

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

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

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

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

  5. 重新載入網頁。

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

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

按下「Click me」按鈕時，只有小狗 JPEG 的要求為 新增到「Network」分頁：

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

這個方法的缺點是，即使使用者 就能看到小狗，他們必須載入 Puppy 元件，因為 index.js。以這個小例子來說，雖然不太對，但其實只是真實的 通常只有在需要 無從得知

現在來看看應用程式的第二個版本 靜態匯入功能是 改為動態匯入Next.js 包含 next/dynamic，因此可讓 即可使用動態匯入功能：

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 元件的程式碼：

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

Puppy 元件現在位於單獨的區塊 1.js 中，該區塊僅載入 按下按鈕時：

點選按鈕後的「DevTools 網路」分頁，顯示額外的 1.js 檔案和新增至檔案清單底部的圖片。

在實際應用程式中，元件通常不會 再延遲載入這些圖片 將您的初始 JavaScript 承載刪去數百 KB

含有自訂載入指標的動態匯入作業

建議您在延遲載入資源時提供載入指標 以免發生延遲在 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」。

  6. 按下「按這裡」按鈕。

現在當您點選按鈕時，需要花一點時間載入元件和應用程式 會顯示「載入中...」訊息。我們發送這則訊息。

深色畫面搭配文字

動態匯入不含 SSR

您只需在用戶端 (例如即時通訊) 轉譯元件 小工具)，就可以將 ssr 選項設為 false：

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

結論

Next.js 支援動態匯入功能，可提供元件層級的程式碼 以便盡量減少 JavaScript 酬載並提高應用程式的品質 載入時間。根據預設，所有元件都是在伺服器端轉譯，您可以 如有需要，您可以停用這個選項