25
チャプター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レポートを実行しましょう。
さらに読む
- Next.js: 動的インポート ドキュメント
これは役に立ちましたか?