© Findy Inc. TS 5.9 で使えるようになった import defer で パフォーマンス最適化を実現する 1 2025.11.23 ファインディ株式会社 ⼤⽯ 貴則 

© 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. 

© Findy Inc. 3 まとめ ➔ 2026年に向けて未来のパフォーマンス改善を ⼀緒に考えてみましょう 🎍 ● TS 5.9 で import defer * as from “...” の構⽂に対応 🎉 ● TC39 Stage 3 (Candidate) の新しい import ○ 取得‧解析は即時実⾏ ○ 評価は遅延実⾏ ● ランタイムは開発中 ● バンドラは experiments で⼀部対応 tc39/proposal-defer-import-eval 

© Findy Inc. 4 【背景】 JavaScript パフォーマンスのボトルネックに対する解決策とは ● ネットワークリクエストの最適化 ○ 取得と解析を遅らせる ○ 遅延読み込みやコード分割などの⼿法 ○ FCP (First Contentful Paint) ● CPUコストの最適化 ○ 評価を遅らせる ○ 遅延評価やメインスレッドをブロックしない実装 ○ TBT (Total Blocking Time) 

© Findy Inc. 5 【背景】 JavaScript パフォーマンスのボトルネックに対する解決策とは ● ネットワークリクエストの最適化 ○ 取得と解析を遅らせる ○ 遅延読み込みやコード分割などの⼿法 ○ FCP (First Contentful Paint) ● CPUコストの最適化 ○ 評価を遅らせる ○ 遅延評価やメインスレッドをブロックしない実装 ○ TBT (Total Blocking Time) 

© Findy Inc. 6 import defer とは？ TS 5.9 / TC39 Stage 3 の新機能 ● 読み込みは即時 ○ 取得、解析まで即時実⾏ ● 評価はアクセス時に同期的に実⾏ ○ プロパティを使う時にトップレベ ルスコープの評価を同期的に実施 ➔ 同期処理として扱いながら遅延実⾏を⾏える！ 

© Findy Inc. 7 他の import ⽅法との違い ① 静的 import ○ 即時取得‧即時評価 (同期) ② 動的 import ○ Promise解決時,取得･評価 (⾮同期) ③ import defer 🆕 ○ 取得は即時実⾏ (同期) ○ 評価は遅延実⾏ (同期) 

© Findy Inc. 8 他の import ⽅法との違い ① 静的 import ○ 即時取得‧即時評価 (同期) ② 動的 import ○ Promise解決時,取得･評価 (⾮同期) ③ import defer 🆕 ○ 取得は即時実⾏ (同期) ○ 評価は遅延実⾏ (同期) 

© Findy Inc. 9 他の import ⽅法との違い ① 静的 import ○ 即時取得‧即時評価 (同期) ② 動的 import ○ Promise解決時,取得･評価 (⾮同期) ③ import defer 🆕 ○ 取得は即時実⾏ (同期) ○ 評価は遅延実⾏ (同期) 

© Findy Inc. 10 他の import ⽅法との違い ① 静的 import ○ 即時取得‧即時評価 (同期) ② 動的 import ○ Promise解決時,取得･評価 (⾮同期) ③ import defer 🆕 ○ 取得は即時実⾏ (同期) ○ 評価は遅延実⾏ (同期) 

© Findy Inc. 11 静的 import 動的 import import defer 構⽂ import { foo } from '...' const p = import('...') import defer * as ns from '...' 取得‧解析 即時 遅延 即時 評価 即時 遅延 遅延 返値 なし (静的宣⾔) Promise ModuleNamespace 同期/⾮同期 同期 ⾮同期 同期 他の import ⽅法との違い それぞれの import で特性が異なる 

© Findy Inc. 12 具体的な活⽤事例 Import on Interaction パターンへの適応 ● モーダルをクリックするまで遅延する事例 ● Dynamic import で実装した場合 ○ すべて⾮同期で実装 ○ 取得‧解析‧評価が Promise 解決時に⼀⻫に実⾏ ○ ローディング処理が必要 ➔ アクションを開始できるまでにタイムラグが発⽣ 

© Findy Inc. 13 具体的な活⽤事例 Import on Interaction パターンへの適応 ● モーダルをクリックするまで遅延する事例 ● import defer で実装した場合 ○ すべて同期処理で実装可能 ○ 初期化時に取得‧解析まで実⾏ ○ アクセス時に評価が実⾏ ○ 同期なのでローディングの実装不要 ➔ 通常のオブジェクトを扱うように遅延ローディングを実現 

© Findy Inc. 14 構⽂の注意点 import defer * as ns from "..." 以外の形式は利⽤不可 ● ns は名前空間オブジェクトではない ○ ModuleNamespace という特殊なオブジェクト ● [[Get]] が特別な振る舞いをする ○ 初回のアクセス時にトップレベルを同期的に評価 ● 評価が実⾏されると通常のオブジェクトのように振る舞う ➔ ns はプロキシオブジェクトになることに留意が必要 

© Findy Inc. 15 エラーハンドリングの注意点 ● 初期化エラーは import で発⽣しない ○ 取得、解析のみ実⾏するため ● アクセスした時にはじめて発⽣する ○ 評価はアクセスするまで評価され ないため ➔ エラーハンドリングに留意が必要 トップレベルスコープのエラーは「使う時」に起きる 

© Findy Inc. 16 TypeScript で利⽤する場合の注意 tsconfig.json の設定変更が必要 ● module を下記のいずれかに設定 ○ “preserve” または “esnext” ○ この意味は過去の登壇を参照 ● TSは構⽂をパススルーするだけ ○ ポリフィル（ダウンレベル）しない ➔ TS 5.9 の対応は構⽂エラーを消しただけ であることに留意が必要 TypeScriptのmoduleオプションを改めて整理する | TSKaigi 2025 

© Findy Inc. 17 エコシステムの現状 ⼀部のバンドラーが実験的にサポート ● ランタイム ○ V8, SpiderMonkey で開発中 ● バンドラー ○ ⼀部のバンドラーが experiments フラグで対応 ○ (Webpack, Rspack, esbuild など) ➔ 今すぐ使い始めることはできない 😭 * import defer - Chrome Platform Status * Release v5.103.0 · webpack/webpack * Announcing Rspack 1.6 - Rspack * Release v0.25.7 · evanw/esbuild 

© Findy Inc. 18 まとめ ➔ 2026年に向けて未来のパフォーマンス改善を ⼀緒に考えてみましょう 🎍 ● TS 5.9 で import defer * as from “...” の構⽂に対応 🎉 ● TC39 Stage 3 (Candidate) の新しい import ○ 取得‧解析は即時実⾏ ○ 評価は遅延実⾏ ● ランタイムは開発中 ● バンドラは experiments で⼀部対応 

© Findy Inc. 19 最後に 登壇資料 & SNS (bicstone.me) ⼤⽯貴則 (@bicstone) Findyブースでタイピングゲームをやっています！17:30 まで！！