TypeScript 5.9 - import defer

오랜만에 TypeScript release note 를 보다가 인상적인 문법을 찾아 소개해보려고 한다. 2025년 8월 1일에 나온 TypeScript 5.9 버전에 추가된 문법이다.

import defer

import defer 는 모듈을 즉시 실행하지 않고 해당 모듈의 export 된 속성에 처음 접근할 때까지 모듈의 평가와 실행을 지연시킨다.

현재는 아래와 같은 namespace import 에서만 지원한다.

import defer * as feature from './some-feature';

모듈의 평가와 실행을 지연시킨다고요?

아래 코드를 import 한다면 initializationWithSideEffects() 라는 함수가 실행되어 specialConstant 의 값이 42가 되는 사이드 이펙트가 발생한다.

// some-feature.ts

initializationWithSideEffects();
function initializationWithSideEffects() {
  // ...
  specialConstant = 42;
  console.log("Side effects have occurred!");
}
export let specialConstant: number;

다만 import defer 를 사용한다면, specialConstant 에 접근하기 전까지는 해당 some-feature.ts 모듈이 평가되고 실행되지 않아 initializationWithSideEffects 함수가 실행되지 않는다.

import defer * as feature from './some-feature';
// 사이드 이펙트가 발생하지 않는다
// ...
// `specialConstant` 에 접근할 경우, `feature` 모듈의 코드가 실행되어
// 사이드 이펙트가 발생해 `specialConstant` 의 값이 42가 된다.
console.log(feature.specialConstant); // 42

장점: 시작 성능 개선

복잡한 초기화 로직이 포함된 모듈이나 특정 상황에서만 유용한 모듈을 로딩하는 경우에 모듈이 초기 로딩 시 바로 실행되지 않아 애플리케이션의 시작 성능을 향상시킬 수 있다.

주의점

namespace import 에서만 사용 가능

// ❌ 
import defer { doSomething } from "some-module";
// ❌   
import defer defaultExport from "some-module";
// ✅ 
import defer * as feature from "some-module";

모듈의 export 된 속성에 접근할 때까지 모듈이 평가되지 않아서 named import 나 default import 는 사용이 불가능하다.

ESNext 또는 preserve 모듈에서만 사용 가능

import defer 은 해당 기능을 지원하는 런타임이나 번들러에서 사용되도록 의도된 기능이다. 그렇기 때문에 ESNext 와 preserve 모듈에서만 사용할 수 있다.

await import 와의 차이점

1. 정적 vs 동적

await import 는 동적(dynamic) import 인 반면, import defer 는 정적(static) import 이다.

import defer 는 정적 import 로 경로가 고정되어있어, 트리 쉐이킹과 정적 분석, 코드 최적화에 유리하다.

2. 로드 시점

await import 는 코드 실행 중 import() 가 호출될 때 네트워크 요청을 하고, 필요할 때까지 아예 불러오지 않는다.

반면 import defer 는 이 모듈을 나중에 실행해야 한다고 예약하여 모듈을 불러오지만 필요할 때까지 평가하지 않는다.

---

TypeScript 5.9 Release note