TypeScriptの隠れた最適化テクニック：`importHelpers`でバンドルサイズをスマートに削ぎ落とす
現場でTypeScriptを書いていると、つい「型さえ通れば正義」という思考に陥りがちですが、中級以上のエンジニアとして次に目指すべきは「生成されるJavaScriptの質と量」への責任です。
特にフロントエンドの現場では、バンドルサイズはユーザー体験（UX）に直結します。今回は、多くのプロジェクトで見落とされがちな、しかし確実に効く最適化手法「`importHelpers`」について深掘りしましょう。
コンパイル後の「重複」という名のゴミ
TypeScriptで最新の構文（`async/await`やクラスのデコレータ、スプレッド構文など）を使う際、ブラウザが理解できるように変換されますよね。このとき、TSコンパイラは「ヘルパー関数」と呼ばれる小さな処理を、変換後のファイルの先頭に毎回埋め込みます。
例えば、`__awaiter`や`__spreadArray`といった関数です。これらが複数のファイルでバラバラに生成されると、どうなるか。同じコードが何度もバンドル内に重複して存在することになります。
「たかが数十行のヘルパー」と思うかもしれません。しかし、大規模なプロジェクトで数千のファイルがあれば、その重複はキロバイト単位の無駄になります。この無駄を省くのが `importHelpers` の役割です。
設定はたったの2ステップ
`tsconfig.json` を開いてください。以下の設定を追加するだけで、コンパイラは「自前でヘルパーを埋め込むのはやめて、外部ライブラリからインポートしよう」という挙動に切り替わります。
1. tsconfig.jsonの設定
{
“compilerOptions”: {
// これをtrueにするだけで、ヘルパー関数を外部から参照するようになる
“importHelpers”: true,
// 他の推奨設定（モジュール解決やターゲット）
“module”: “esnext”,
“target”: “es2020”,
“moduleResolution”: “node”
}
}
2. 必要なパッケージのインストール
`importHelpers` を有効にすると、コンパイラは `tslib` というライブラリを探しに行きます。インストールを忘れるとビルド時に怒られるので、忘れずに追加しておきましょう。
npm install tslib
または
yarn add tslib
現場で見る「劇的な変化」
具体的な挙動の差を見てみましょう。`importHelpers: false`（デフォルト）の場合、コンパイル後のJSはこうなります。
// コンパイル後のイメージ（ヘルパーがファイルごとに埋め込まれる）
var __awaiter = (this && this.__awaiter) || function(…) { … };
async function fetchData() {
return await api.get(‘/user’);
}
これが `importHelpers: true` になると、こう変わります。
// コンパイル後のイメージ（tslibからインポートされる）
import { __awaiter } from “tslib”;
function fetchData() {
return __awaiter(this, void 0, void 0, function () {
return yield api.get(‘/user’);
});
}
なぜこれが「プロの選択」なのか
この手法には、単なるコード削減以上のメリットがあります。
1. キャッシュ効率の向上: 全ファイルで `tslib` を参照するため、ブラウザのキャッシュに乗れば、どのファイルからも同じコードを再利用できます。
2. バンドルサイズの確定的な削減: 特にライブラリ開発や、数多くのコンポーネントを持つSPAにおいて、ビルド結果の重複を排除する強力な一手になります。
3. メンテナンス性: TSのバージョンアップに伴いヘルパーの内容が更新された場合、`tslib` をアップデートするだけで全ファイルに修正が反映されます。
実務での注意点
一点だけ、現場でハマりやすいポイントを伝えておきます。それは「ライブラリ開発」のときです。
もしあなたがnpmで公開するパッケージを作っているなら、`tslib` を `dependencies` に入れるのを忘れないでください。`devDependencies` に入れてしまうと、利用者がパッケージをインストールした際に「`tslib` が見つからない」という実行時エラーを引き起こす可能性があります。
まとめ
「なんとなく動く」コードから、「仕組みを理解して制御する」コードへ。`importHelpers` はその第一歩です。
設定自体は一瞬ですが、こうした小さな積み重ねが、何万行ものコードベースになったときに「なぜかうちのプロダクトはJSのサイズが肥大化しないね」という、エンジニアリングとしての余裕を生み出します。
明日からの開発で、ぜひ `tsconfig.json` を見直してみてください。あなたの書いたコードが、より洗練された姿でブラウザに届けられるはずです。
コメント