はじめに
TypeScript を使っていると、「動くけどビルドが遅い」「なぜか型チェックの待ち時間が長い」という悩みに遭遇することがあります。
ここでは、実務で遭遇した “重いビルド” を具体的にどう改善すれば高速化できるかを、設定サンプル形式で紹介します。
- コンパイル最適化の基本
- 実務で見逃しがちな NG パターン
- 開発体験とランタイムの両方を速くする方法
など、読んだその日から役立つ知見を詰め込みました。
1. 差分ビルドを有効化しましょう
❌ Before（デフォルト設定）
tsc は毎回フルビルドを実行します。
✅ After
tsconfig.json に以下を追加します。
{
"compilerOptions": {
"incremental": true,
"tsBuildInfoFile": "cache.tsbuildinfo"
}
}
効果: 変更ファイルだけを再ビルドするため、ビルド時間を大幅短縮できます。
2. ライブラリ型チェックをスキップしましょう
❌ Before
node_modules 内の巨大な型定義も毎回チェックされます。
✅ After
"skipLibCheck": true
効果: 型チェック時間を 30〜50% 削減できます（大型プロジェクトの場合）。
3. 開発ビルドは esbuild / SWC を使いましょう
❌ Before
tsc -w だけでウォッチすると再コンパイルが遅いです。
✅ After
# 高速トランスパイル
esbuild src/index.ts --bundle --outfile=dist/app.js --platform=node
# 型チェックは別プロセス
tsc --noEmit
効果: コード変更 → リロードが体感 10 倍以上速くなることもあります。
4. isolatedModules を有効化しましょう
❌ Before
ファイル間依存を解決しながらトランスパイルするため、Babel/SWC 互換が落ちます。
✅ After
"isolatedModules": true
効果: 1 ファイル単位でのコンパイルに切り替わり、トランスパイラとの相性が向上します。
5. 複雑な型計算を減らしましょう
❌ Before
再帰型やネストの深い条件型が多用され、型チェックが重くなります。
✅ After
-
as constやsatisfiesで推論に任せる - ユーティリティ型を 1 段階に簡素化する
効果: 型チェック時間とメモリ使用量を削減できます。
6. モジュール解決方式を最新化しましょう
❌ Before
古い node 解決で毎回余計な I/O が発生します。
✅ After
"moduleResolution": "node16"
効果: キャッシュヒット率が上がり、ビルドとテストが速くなります。
7. 不要な型定義パッケージを削除しましょう
❌ Before
使わない @types/* が依存グラフに残り続けます。
✅ After
- 未使用の型定義をアンインストール
- AWS SDK v2 など重量ライブラリを軽量版へ移行
効果: 解析対象ファイル数を減らし、tsc の負荷を下げます。
8. CI で .tsbuildinfo をキャッシュしましょう
❌ Before
CI ごとにフルビルド → 時間がかかります。
✅ After
ビルドキャッシュを保存：
# GitHub Actions 例
- name: Restore tsc cache
uses: actions/cache@v3
with:
path: cache.tsbuildinfo
key: ${{ runner.os }}-tsc-${{ hashFiles('**/*.ts') }}
効果: 差分ビルドが CI でも有効になり、待ち時間を短縮します。
9. ランタイム最適化も忘れずに
- 配列操作が中心なら
forループが最速な場合があります - オブジェクトより
Map/Setのほうがハッシュ衝突が少なく高速です - JSON パース/文字列連結の多用は CPU を浪費します
10. バンドルサイズを可視化しましょう
npx webpack-bundle-analyzer dist/bundle.js
不要なポリフィルや重複依存を削除し、ロード時間を短縮できます。
まとめ：遅いビルドには必ず “理由” があります
| 課題 | 解決の観点 |
|---|---|
| フルビルドの待ち時間 | 差分ビルド (incremental, .tsbuildinfo) |
| ライブラリ型チェック |
skipLibCheck でスキップ |
| 遅いウォッチ | esbuild / SWC で高速トランスパイル |
| 複雑な型 | 推論任せ＋ユーティリティ簡素化 |
| ブラウザロード遅延 | バンドルサイズ可視化と分割 |
速くなるビルドは、読みやすくなる設計でもあります。
ボトルネックを “当たり前だと思っている設定” から見直してみましょう。
おわりに
TypeScript は強力な型システムを持ちながら、高速ビルドの余地も大きい言語です。
本記事がビルド時間短縮や開発体験向上のヒントになれば幸いです。