【TypeScript】ビルド最適化 - コンパイル時間を50%削減

概要

TypeScriptを使った大規模プロジェクトでは、ビルドやコンパイルにかかる時間が増え、開発速度が低下しがちです。特に、頻繁なコード変更やリビルドが必要な場面では、コンパイル時間を削減することが生産性向上のカギとなります。本記事では、TypeScriptのビルド時間を50%削減するためのテクニックとツールについて解説します。incrementalビルド、isolatedModulesオプション、そしてesbuildの活用など、効率的なビルドのための具体的な手法を紹介します。

TypeScriptのビルド時間削減のメリット

TypeScriptプロジェクトのコンパイル時間を短縮することで、開発効率が向上し、デバッグサイクルもスムーズになります。ビルド時間が短いと、次のような利点があります。

• フィードバックループの短縮
  変更内容の確認が早くなり、コード修正の判断が迅速になります。

• 開発者の生産性向上
  ビルド待機時間が減ることで、より多くの開発作業に集中できます。

• CI/CDパイプラインの効率化
  自動テストやデプロイが速くなるため、プロジェクト全体のリリースサイクルが短縮されます。

TypeScriptのコンパイル時間を短縮するためのテクニック

インクリメンタルビルドの有効化

TypeScriptのincrementalオプションを使うと、ビルド時に以前のコンパイル結果をキャッシュとして保存でき、再ビルド時には変更があったファイルだけをコンパイルします。これにより、特に大規模プロジェクトでのビルド時間が大幅に短縮されます。 tsconfig.jsonでincrementalオプションを有効にします。

{
  "compilerOptions": {
    "incremental": true,
    "tsBuildInfoFile": "./.tsbuildinfo" // キャッシュファイルの保存場所
  }
}

これで一度ビルドが行われると、.tsbuildinfoファイルが生成され、次回以降は差分ビルドのみが実行されます。

isolatedModulesオプションの使用

isolatedModulesオプションを有効にすると、TypeScriptが各モジュールを個別にコンパイルするようになります。これにより、型チェックのプロセスが最適化され、全体のコンパイル速度が向上します。このオプションは、特にBabelやesbuildなどと併用してトランスパイルする場合に有効です。

{
  "compilerOptions": {
    "isolatedModules": true
  }
}

この設定により、importやexportのあるファイルに対して、TypeScriptが独立したモジュールとしてトランスパイルを行うため、ビルド時間が短縮されます。

skipLibCheckでライブラリチェックを無効化

プロジェクト内で使用する型定義ファイルの検証は、コンパイル時間を増加させる原因の一つです。skipLibCheckオプションを使用すると、型定義ファイルのチェックをスキップし、ビルド速度が向上します。

{
  "compilerOptions": {
    "skipLibCheck": true
  }
}

この設定により、型の検証が行われないため、特に依存関係が多いプロジェクトで効果を発揮します。

esbuildの活用

esbuildは、高速なJavaScript/TypeScriptバンドラとして注目を集めています。TypeScriptのトランスパイルにも対応しており、tscよりも速く、開発環境でのリビルドが必要なプロジェクトに適しています。ViteやSnowpackなどのビルドツールにも統合されており、esbuildを使うとビルド時間が大幅に短縮されます。

esbuildのインストールと設定

まず、esbuildをインストールします。

npm install esbuild --save-dev

次に、スクリプトを追加してビルドを行います。以下のように、TypeScriptファイルをesbuildでトランスパイルします。

npx esbuild src/index.ts --bundle --outfile=dist/bundle.js --platform=node --sourcemap

esbuildの--bundleオプションにより、依存関係をまとめたバンドルファイルが生成され、ビルドプロセス全体が簡略化されます。

プロジェクトのビルドパフォーマンス最適化

マルチスレッド処理の活用

TypeScriptの標準コンパイラtscではマルチスレッド処理が行われませんが、esbuildやswcといったツールはマルチスレッドに対応しており、ビルドを並列で実行します。ビルド時間を短縮したい場合、これらのツールを活用することで、特に複数のCPUコアがある環境でビルド速度が改善されます。

キャッシュとウォッチモードの活用

TypeScriptのウォッチモード（--watchオプション）は、ファイルが変更されるたびにビルドをトリガーし、開発中の再ビルド時間を短縮します。

tsc --watch

また、webpackのcacheオプションなど、ビルドツールに備わるキャッシュ機能を利用すると、再ビルド時に差分のみがビルドされるため、ビルド時間がさらに短縮されます。

// webpack.config.js
module.exports = {
  // 他の設定
  cache: {
    type: 'filesystem', // ファイルシステムキャッシュを有効化
  },
};

CI/CDパイプラインでの最適化

CI/CD環境でのビルド時間も、最適化の対象です。TypeScriptのビルド設定を適切に構成することで、CI/CDパイプラインの実行速度が向上し、デプロイサイクルが短縮されます。

キャッシュを活用したビルド時間短縮

CI/CD環境でのキャッシュを活用することで、ビルド時間を短縮できます。GitHub ActionsやCircleCIなどでは、依存関係やビルドキャッシュを保存し、再利用する機能が提供されています。

GitHub Actionsの例

GitHub Actionsでキャッシュを有効にする例です。actions/cache@v3を使用して、node_modulesフォルダをキャッシュし、再ビルドの時間 を短縮します。

# .github/workflows/ci.yml
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Node.jsのセットアップ
        uses: actions/setup-node@v2
        with:
          node-version: '16'
      - name: キャッシュnode_modules
        uses: actions/cache@v3
        with:
          path: node_modules
          key: ${{ runner.os }}-node-${{ hashFiles('/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-node-
      - run: npm install
      - run: npm run build

これにより、依存関係のインストール時間が短縮され、CI/CDのビルドがより速くなります。

まとめ

TypeScriptプロジェクトのビルド時間を短縮するためには、incrementalオプションやisolatedModules、skipLibCheckといった設定の活用が非常に効果的です。また、高速バンドルツールであるesbuildを使用することで、ビルドの速度をさらに向上させることができます。これらの最適化手法を導入することで、開発とデプロイのパフォーマンスを向上させ、生産性の高い開発環境を実現しましょう。