【TypeScript】import defer 完全ガイド — 評価を遅延する新構文

// 読み込みは即時、評価は初回アクセス時まで遅延
import defer * as analytics from "./analytics.js";

// この時点ではanalyticsモジュールはまだ評価されていない
console.log("App started");

// 初めてプロパティにアクセスした瞬間に評価される
analytics.track("page_view");

// これだけが正しい
import defer * as feature from "./feature.js";

// 名前付きimportは不可
import defer { doSomething } from "./feature.js";

// default importも不可
import defer feature from "./feature.js";

// 名前空間なしも不可
import defer "./feature.js";

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "bundler",
    "strict": true
  }
}

// 動的importの場合：非同期処理が必要
async function loadSettings() {
  const config = await import("./heavy-config.js");
  return config.default;
}

// import deferの場合：同期的に書ける
import defer * as config from "./heavy-config.js";

function loadSettings() {
  // ここで初めて評価される
  return config.default;
}

// heavy-analytics.ts
console.log("Analytics module evaluating...");

const start = Date.now();
while (Date.now() - start < 500) {
  /* CPUバウンドな処理 */
}

export function track(event: string) {
  console.log("Track: " + event);
}

export const APP_VERSION = "1.0.0";

// main.ts
import defer * as analytics from "./heavy-analytics.js";

console.log("App started");
// 起動時間に500msのオーバーヘッドなし

button.addEventListener("click", () => {
  analytics.track("button_click");
});

// storage-web.ts
export function save(key: string, value: string) {
  localStorage.setItem(key, value);
}

// storage-node.ts
import { writeFileSync } from "node:fs";

export function save(key: string, value: string) {
  writeFileSync("./data/" + key + ".json", value);
}

// main.ts
import defer * as storage from "./storage-web.js";

export function savePreference(key: string, value: string) {
  storage.save(key, value);
}

// i18n-resources.ts
export const resources = {
  ja: { /* ... 大量データ */ },
  en: { /* ... */ },
};

import defer * as i18n from "./i18n-resources.js";

function getMessage(locale: string, key: string): string {
  return i18n.resources[locale]?.[key] ?? "MISSING";
}

// async-module.ts
const response = await fetch("/config.json");
export const config = await response.json();

// main.ts
import defer * as cfg from "./async-module.js";
// top-level awaitを含むのでdeferしてもすぐに評価が開始される