TypeScript 5.9で使えるようになった import defer でパフォーマンス最適化を実現する

TypeScript 5.9で利用可能となる新機能「import defer」を用いたパフォーマンス最適化について解説しています。

TC39 Stage 3の提案であるこの機能は、モジュールの「取得・解析」を即座に行う一方で、トップレベルの「評価（実行）」を実際にプロパティにアクセスする瞬間まで遅延させるものです。これにより、従来の動的import（dynamic import）のように非同期処理（Promise）を扱う複雑さを避けつつ、同期的な構文のままで初期ロード時のCPUコスト（TBT）を削減できる利点を紹介しています。

具体的な活用例として、モーダルのような「ユーザー操作時に初めて必要となる機能」の評価を遅らせるパターンを紹介しています。また、利用にはtsconfig.jsonの設定変更が必要であり、現時点でランタイムやバンドラは実験的な対応にとどまる点にも言及しつつ、2026年に向けた未来のパフォーマンス改善を一緒に考えようと呼びかけています。

【この資料で発表したイベント】

- TSKaigi Hokuriku 2025

【著者について】

- Portfolio: bicstone.me
- X: @bicstone_me

© 2025 Oishi Takanori

Transcript

1. © Findy Inc. TS 5.9 で使えるようになった import defer で パフォーマンス最適化を実現する 1 2025.11.23 ファインディ株式会社 ⼤⽯ 貴則
2. © Findy Inc. 2 @bicstone_me ⼤⽯ 貴則 OISHI Takanori 登壇者紹介 • ⾼専機械⼯学科卒、元機械設計エンジニア • 現在はSaaS業界に5年携わるWebエンジニア • TypeScript / Ruby / PHP / Python / Dart • Certified ScrumMaster ® @oishi.takanori @bicstone Certified ScrumMaster® is a certification mark of Scrum Alliance, Inc. Any unauthorized use is strictly prohibited.
3. © Findy Inc. 3 まとめ ➔ 2026年に向けて未来のパフォーマンス改善を ⼀緒に考えてみましょう 🎍 • TS 5.9 で import defer * as from “...” の構⽂に対応 🎉 • TC39 Stage 3 (Candidate) の新しい import ◦ 取得‧解析は即時実⾏ ◦ 評価は遅延実⾏ • ランタイムは開発中 • バンドラは experiments で⼀部対応 tc39/proposal-defer-import-eval <https://github.com/tc39/proposal-defer-import-eval>
4. © Findy Inc. 4 【背景】 JavaScript パフォーマンスのボトルネックに対する解決策とは • ネットワークリクエストの最適化 ◦ 取得と解析を遅らせる ◦ 遅延読み込みやコード分割などの⼿法 ◦ FCP (First Contentful Paint) • CPUコストの最適化 ◦ 評価を遅らせる ◦ 遅延評価やメインスレッドをブロックしない実装 ◦ TBT (Total Blocking Time)
5. © Findy Inc. 5 【背景】 JavaScript パフォーマンスのボトルネックに対する解決策とは • ネットワークリクエストの最適化 ◦ 取得と解析を遅らせる ◦ 遅延読み込みやコード分割などの⼿法 ◦ FCP (First Contentful Paint) • CPUコストの最適化 ◦ 評価を遅らせる ◦ 遅延評価やメインスレッドをブロックしない実装 ◦ TBT (Total Blocking Time)
6. © Findy Inc. 6 import defer とは？ TS 5.9 / TC39 Stage 3 の新機能 • 読み込みは即時 ◦ 取得、解析まで即時実⾏ • 評価はアクセス時に同期的に実⾏ ◦ プロパティを使う時にトップレベ ルスコープの評価を同期的に実施 ➔ 同期処理として扱いながら遅延実⾏を⾏える！
7. © Findy Inc. 7 他の import ⽅法との違い ① 静的 import ◦ 即時取得‧即時評価 (同期) ② 動的 import ◦ Promise解決時,取得･評価 (⾮同期) ③ import defer 🆕 ◦ 取得は即時実⾏ (同期) ◦ 評価は遅延実⾏ (同期)
8. © Findy Inc. 8 他の import ⽅法との違い ① 静的 import ◦ 即時取得‧即時評価 (同期) ② 動的 import ◦ Promise解決時,取得･評価 (⾮同期) ③ import defer 🆕 ◦ 取得は即時実⾏ (同期) ◦ 評価は遅延実⾏ (同期)
9. © Findy Inc. 9 他の import ⽅法との違い ① 静的 import ◦ 即時取得‧即時評価 (同期) ② 動的 import ◦ Promise解決時,取得･評価 (⾮同期) ③ import defer 🆕 ◦ 取得は即時実⾏ (同期) ◦ 評価は遅延実⾏ (同期)
10. © Findy Inc. 10 他の import ⽅法との違い ① 静的 import ◦ 即時取得‧即時評価 (同期) ② 動的 import ◦ Promise解決時,取得･評価 (⾮同期) ③ import defer 🆕 ◦ 取得は即時実⾏ (同期) ◦ 評価は遅延実⾏ (同期)
11. © Findy Inc. 11 静的 import 動的 import import defer 構⽂ import { foo } from '...' const p = import('...') import defer * as ns from '...' 取得‧解析 即時 遅延 即時 評価 即時 遅延 遅延 返値 なし (静的宣⾔) Promise ModuleNamespace 同期/⾮同期 同期 ⾮同期 同期 他の import ⽅法との違い それぞれの import で特性が異なる
12. © Findy Inc. 12 具体的な活⽤事例 Import on Interaction パターンへの適応 • モーダルをクリックするまで遅延する事例 • Dynamic import で実装した場合 ◦ すべて⾮同期で実装 ◦ 取得‧解析‧評価が Promise 解決時に⼀⻫に実⾏ ◦ ローディング処理が必要 ➔ アクションを開始できるまでにタイムラグが発⽣
13. © Findy Inc. 13 具体的な活⽤事例 Import on Interaction パターンへの適応 • モーダルをクリックするまで遅延する事例 • import defer で実装した場合 ◦ すべて同期処理で実装可能 ◦ 初期化時に取得‧解析まで実⾏ ◦ アクセス時に評価が実⾏ ◦ 同期なのでローディングの実装不要 ➔ 通常のオブジェクトを扱うように遅延ローディングを実現
14. © Findy Inc. 14 構⽂の注意点 import defer * as ns from "..." 以外の形式は利⽤不可 • ns は名前空間オブジェクトではない ◦ ModuleNamespace という特殊なオブジェクト • [[Get]] が特別な振る舞いをする ◦ 初回のアクセス時にトップレベルを同期的に評価 • 評価が実⾏されると通常のオブジェクトのように振る舞う ➔ ns はプロキシオブジェクトになることに留意が必要
15. © Findy Inc. 15 エラーハンドリングの注意点 • 初期化エラーは import で発⽣しない ◦ 取得、解析のみ実⾏するため • アクセスした時にはじめて発⽣する ◦ 評価はアクセスするまで評価され ないため ➔ エラーハンドリングに留意が必要 トップレベルスコープのエラーは「使う時」に起きる
16. © Findy Inc. 16 TypeScript で利⽤する場合の注意 tsconfig.json の設定変更が必要 • module を下記のいずれかに設定 ◦ “preserve” または “esnext” ◦ この意味は過去の登壇を参照 • TSは構⽂をパススルーするだけ ◦ ポリフィル（ダウンレベル）しない ➔ TS 5.9 の対応は構⽂エラーを消しただけ であることに留意が必要 TypeScriptのmoduleオプションを改めて整理する | TSKaigi 2025 <https://2025.tskaigi.org/talks/bicstone_me>
17. © Findy Inc. 17 エコシステムの現状 ⼀部のバンドラーが実験的にサポート • ランタイム ◦ V8, SpiderMonkey で開発中 • バンドラー ◦ ⼀部のバンドラーが experiments フラグで対応 ◦ (Webpack, Rspack, esbuild など) ➔ 今すぐ使い始めることはできない 😭 * import defer - Chrome Platform Status <https://cr-status.appspot.com/feature/6090846000775168> * Release v5.103.0 · webpack/webpack <https://github.com/webpack/webpack/releases/tag/v5.103.0> * Announcing Rspack 1.6 - Rspack <https://rspack.rs/blog/announcing-1-6> * Release v0.25.7 · evanw/esbuild <https://github.com/evanw/esbuild/releases/tag/v0.25.7>
18. © Findy Inc. 18 まとめ ➔ 2026年に向けて未来のパフォーマンス改善を ⼀緒に考えてみましょう 🎍 • TS 5.9 で import defer * as from “...” の構⽂に対応 🎉 • TC39 Stage 3 (Candidate) の新しい import ◦ 取得‧解析は即時実⾏ ◦ 評価は遅延実⾏ • ランタイムは開発中 • バンドラは experiments で⼀部対応
19. © Findy Inc. 19 最後に 登壇資料 & SNS (bicstone.me) ⼤⽯貴則 (@bicstone) Findyブースでタイピングゲームをやっています！17:30 まで！！