SEO: 動態導入 (Dynamic Imports) | Next.js

在本課程中，我們將減少初始頁面載入時從第三方函式庫載入的 JavaScript 數量。

Next.js 支援 ES2020 的動態 import() 語法來載入 JavaScript。透過它，你可以動態導入 JavaScript 模組並使用它們。此功能也支援伺服器渲染 (SSR)。

你可以將動態導入視為另一種將程式碼拆分為可管理區塊的方式。

開啟 pages/index.js 檔案，並移除檔案開頭的這兩個導入語句，因為我們稍後會在檔案中動態導入它們。

import Fuse from 'fuse.js';
import _ from 'lodash';

目前我們還需要移除：

const fuse = new Fuse(countries, {
  keys: ['name'],
  threshold: 0.3,
});

現在我們已經移除了這段程式碼，讓我們設定搜尋輸入框來使用動態導入的函式庫。

我們可以用以下程式碼替換輸入框：

<input
  type="text"
  placeholder="Country search..."
  className={styles.input}
  onChange={async (e) => {
    const { value } = e.currentTarget;
    // 動態載入函式庫
    const Fuse = (await import('fuse.js')).default;
    const _ = (await import('lodash')).default;
 
    const fuse = new Fuse(countries, {
      keys: ['name'],
      threshold: 0.3,
    });
 
    const searchResult = fuse.search(value).map((result) => result.item);
 
    const updatedResults = searchResult.length ? searchResult : countries;
    setResults(updatedResults);
 
    // 模擬分析事件
    console.info({
      searchedAt: _.now(),
    });
  }}
/>

透過使用動態導入，這解決了頁面載入時「移除未使用的 JavaScript」的問題。同時也改善了我們的互動準備時間 (TTI)，有助於提升首次輸入延遲 (FID)。

讓我們在 Chrome DevTools 中再次執行 Lighthouse 報告來查看進展。

動態導入 (Dynamic Imports)

延伸閱讀

On this page