遅いTypeScriptコンパイルのプロファイリング
--extendedDiagnosticsと--generateTraceでボトルネックを特定します。
「遅いTypeScriptコンパイルのプロファイリング」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全4レッスンが含まれています。
TypeScript が遅くなる理由
複雑な条件型、大規模なユニオンの分配、深く再帰する mapped type によって、大規模なプロジェクトでは TypeScript の型チェッカーが大幅に遅くなることがあります。
// Expensive: distributive conditional on large union
type Slow = LargeUnion extends infer T ? T extends string ? T : never : never;--extendedDiagnostics フラグ
tsc --extendedDiagnostics を実行すると、解析、バインディング、型チェック、出力の各フェーズにかかったコンパイル時間の内訳を確認できます。
tsc --extendedDiagnostics 2>&1 | head -40
# Output:
# Files: 212
# Lines: 48320
# Check time: 8.23s ← focus here--generateTrace フラグ
tsc --generateTrace ./trace を実行すると、Chrome DevTools と互換性のあるトレースファイルが生成されます。このファイルを Performance タブに読み込むと、どの型の処理に時間がかかっているかを確認できます。
tsc --generateTrace ./trace-output
# Open trace-output/trace.json in Chrome DevTools > Performanceトレースの分析
トレースでは、処理コストの高い型のインスタンス化を表す、長い横棒を探します。型名とソースの場所から、何を最適化すべきかが分かります。
# Common culprits in traces:
# - Recursive mapped types with large inputs
# - Distributive conditionals over 50+ member unions
# - Deep infer chains on complex generics--listFiles フラグ
tsc --listFiles を実行すると、コンパイルに含まれるすべてのファイルが表示されます。意図せず含まれた大きな node_modules フォルダーは、よくあるパフォーマンス低下の原因です。
tsc --listFiles 2>&1 | grep node_modules | wc -l
# If this is large, check your include/exclude settingsファイルの取り込み範囲の縮小
tsconfig の include と exclude を使用して、TypeScript が処理するファイルを制限します。
{
"include": ["src/**/*"],
"exclude": ["node_modules", "dist", "**/*.test.ts"]
}手軽な高速化に skipLibCheck を使用する
skipLibCheck: true を設定すると、すべての .d.ts 宣言ファイルの型チェックを省略できます。依存関係が多いプロジェクトでは、コンパイルを大幅に高速化できる場合があります。
{
"compilerOptions": {
"skipLibCheck": true
}
}処理コストの高い型の分離
処理コストの高い型計算を名前付きの中間型に分離すると、TypeScript は使用箇所ごとに再計算せず、それらをキャッシュできます。
// Slow: recomputed at each usage
type Result = ComplexUnion extends string ? ComplexUnion : never;
// Fast: cached
type FilteredUnion = ComplexUnion extends string ? ComplexUnion : never;
type Result = FilteredUnion;transpileOnly によるチェック
開発中は、transpileOnly: true を指定した ts-jest または esbuild を使用して型チェックを省略し、反復作業を高速化します。完全な型チェックは CI で別途実行します。
// jest.config.js with ts-jest
{
transform: {
"^.+\.tsx?$": ["ts-jest", { diagnostics: false }]
}
}エディターのパフォーマンス
VS CodeでTypeScript language serverの動作が遅くなる場合、多くは同じ高コストな型が原因です。TypeScript: Restart TS Serverを実行し、language serverのTS traceを確認してください。
// VS Code settings.json to enable detailed TS server log:
// "typescript.tsserver.log": "verbose"振り返り：コンパイルのプロファイリング
大まかな処理時間の計測には--extendedDiagnosticsを、型ごとの分析には--generateTraceを使用してください。また、コンパイルを高速化するには、対象ファイル、深い条件型、大規模なユニオンの分配を減らしてください。
確認問題
Chrome DevTools互換のトレースファイルを生成するフラグはどれですか？
学んだこと
--extendedDiagnosticsと--generateTraceを使ってTypeScriptのコンパイルをプロファイリングします。対象ファイルを制限し、skipLibCheckを使用し、中間型をキャッシュし、深く再帰する型操作や分配型の操作を避けることで、コンパイル時間を短縮できます。
よくある質問
「遅いTypeScriptコンパイルのプロファイリング」レッスンは無料ですか？
はい。「遅いTypeScriptコンパイルのプロファイリング」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全4レッスンが含まれています。
「遅いTypeScriptコンパイルのプロファイリング」で何を学びますか？
--extendedDiagnosticsと--generateTraceでボトルネックを特定します。 ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
TypeScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「遅いTypeScriptコンパイルのプロファイリング」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このTypeScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- 遅いTypeScriptコンパイルのプロファイリング
- コストの高い型操作を避ける
- skipLibCheckとIsolated Declarations
- CIでの型チェック：戦略とツール