동적 import 캐싱

동적 import를 사용할 때 같은 모듈을 여러 번 import하면 각각 별도의 Promise가 생성된다. 캐싱하면 같은 경로에 대한 import를 하나의 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처럼 같은 import race가 생기기 쉬운 UI에서 효과가 크다.

핵심 설계 포인트는 실패한 Promise까지 cache에 남길지 여부다. retry가 필요한 요구라면 에러 시 cache를 비우는 쪽이 다루기 쉽다.

실무 메모

이 스니펫은 typescript, javascript, performance 주변에서 같은 조작이나 판정을 매번 다시 쓰고 싶지 않을 때 잘 맞는다. 작은 보조 단위로 빼 두면 호출부에서는 의도만 읽기 쉬워진다.

반대로 분기와 전제조건이 늘어나 책임이 커진다면, 하나의 스니펫에 전부 넣지 않는 편이 낫다. 절차와 helper를 나누거나 역할별로 쪼개 두는 편이 유지보수에 유리하다.

구현 메모

쓸 때는 입력, 출력, 부작용을 먼저 정해 두면 재사용이 쉬워진다. 동적 import 캐싱도 typescript, javascript, performance 문맥에서 무엇을 짧게 처리하려는 스니펫인지 먼저 고정하면 호출부가 읽기 쉬워진다.

동적 import를 캐싱하는 가벼운 TypeScript 구현. 같은 경로에 대한 여러 import를 하나의 Promise로 처리합니다. 라는 목적에 대해 전제 확인까지 모두 넣을 필요는 없다. 호출부에 남길 책임과 이 스니펫 안에서 닫을 책임을 나누는 편이 덜 무너진다.