SEO: ダイナミックインポート

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

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

ダイナミックインポートは、コードを管理可能なチャンクに分割する別の方法と考えてください。

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="国を検索..."
  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を削除」という問題が解決されます。これにより、Time to Interactive (TTI)も改善され、First Input Delay (FID)の向上に役立ちます。

Chrome DevToolsで再度Lighthouseレポートを実行して、進捗を確認しましょう。

さらに詳しく

Next.js: ダイナミックインポートのドキュメント

ダイナミックインポート

さらに詳しく

On this page