動的インポートのキャッシュ実装

dynamic importを使う際、同じモジュールを複数回インポートすると都度Promiseが生成される。 キャッシュすることで、同じパスへのインポートを1回のPromiseで処理できる。

type ModuleCache = Map<string, Promise<unknown>>;

const modCache: ModuleCache = new Map();

export async function dynamicImport<T = unknown>(path: string): Promise<T> {
  const cache = modCache.get(path);
  if (cache) return cache as Promise<T>;

  const modPromise = import(path) as Promise<T>;
  modCache.set(path, modPromise);
  return modPromise;
}

実装で効く場面

このパターンの効きどころは、同じモジュールに対する並行 import が走る場面。lazy dialog、管理画面 widget、command palette のように同時呼び出しが起きる UI で race を減らしやすい。

注意点は、失敗した Promise まで cache する設計にするかどうか。retry したい要件なら、エラー時に cache を消す方が扱いやすい。

実務メモ

このスニペットは、typescript、javascript、performance の周辺で同じ操作や判定を毎回書きたくない時に向く。小さな補助として切り出しておくと、呼び出し側では意図だけを追いやすい。

逆に、分岐や前提条件が増えて責務が膨らむなら、1本のスニペットに詰め込まない方がよい。手順と helper を分けるか、役割ごとに切り出す方が保守しやすい。

実装メモ

使う時は、入力、出力、副作用の3点を先に決めておくと流用しやすい。動的インポートのキャッシュ実装 も typescript、javascript、performance の文脈で何を短くしたいスニペットなのかを先に固定すると、呼び出し側が読みやすくなる。

TypeScriptでdynamic importをキャッシュする軽量実装。同じパスへの複数回のインポートを1回のPromiseで処理する。 という目的に対して、前提確認まで全部詰め込む必要はない。呼び出し側へ残す責務と、このスニペットで閉じる責務を分けた方が崩れにくい。