Zenn Dev Snowcait Articles 4fb5064177d996
@tabler/icons-svelte のビルドを 10 倍速くする
- URL: https://zenn.dev/snowcait/articles/4fb5064177d996
- 日付: 2026-06-26
- Tier: Tier 3
- 要旨: @tabler/icons-svelte はパッケージのトップからアイコンをインポートすると開発サーバー起動時のビルドが非常に遅くなる問題がある。パッケージ直下ではなく各アイコンの実ファイルパスを直接インポートすることでビルド時に読み込むモジュール数が大幅に減り、ビルドが約 10 倍速くなる。変更前は 4351 モジュール処理で 1 分 6 秒かかっていたものが、変更後は 277 モジュールで大幅に短縮されている。この手法は開発時の体験改善として有効で、SvelteKit プロジェクトで多くのアイコンを使うケースで特に効果がある。
詳細
変更前のインポート（遅い）: import { IconHeart } from ‘@tabler/icons-svelte’;
変更後のインポート（高速）: import IconHeart from ‘@tabler/icons-svelte/dist/svelte/icons/IconHeart.svelte’;
ビルド結果の比較:
- 変更前: 4351 モジュール処理、約 1 分 35 秒（クライアント+サーバー合算）
- 変更後: 277 モジュール処理、大幅に短縮
理由: パッケージトップからのインポートはアイコンライブラリ全体のモジュールツリーを読み込んでしまうため。実ファイルパスを指定することで必要なアイコンのみを読み込む形になり、バンドルサイズと処理時間が削減される。
注意点: dist 以下のパス構造はバージョン変更で変わる可能性があるため、バージョンアップ時には確認が必要。