コンテンツをスキップ

25

動的インポート

このレッスンでは、サードパーティライブラリから初期ページロード時に読み込まれるJavaScriptの量を減らします。

Next.jsはJavaScriptのES2020 動的import()をサポートしています。これを使用すると、JavaScriptモジュールを動的にインポートして操作できます。これらはサーバーサイドレンダリング(SSR)でも機能します。

動的インポートは、コードを管理しやすいチャンクに分割するもう1つの方法と考えてください。

pages/index.jsファイルを開き、ファイル冒頭のこれら2つのインポートを削除します。これらはファイルのさらに下で動的にインポートします。

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;
    // Dynamically load libraries
    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);
 
    // Fake analytics hit
    console.info({
      searchedAt: _.now(),
    });
  }}
/>

動的インポートを使用することで、ページロード時の「未使用のJavaScriptを削除」問題を解決します。これにより、Time to Interactive (TTI) も向上し、First Input Delay (FID) の改善にも役立ちます。

進捗を確認するために、Chrome DevToolsで別のLighthouseレポートを実行しましょう。

さらに読む

チャプターを完了しました25

次へ

26: コンポーネントの動的インポート