Viteバンドルアナライザー

問題

Viteで開発したアプリケーションのバンドルサイズを分析したいが、Rollupプラグインが機能しない。バンドルの構成要素を可視化し、サイズ最適化のための適切なツールが必要。

解決策

rollup-plugin-visualizerの直接利用

1. パッケージをインストール:

npm install --save-dev rollup-plugin-visualizer

2. Vite設定ファイルを更新:

import { defineConfig } from 'vite'
import { visualizer } from 'rollup-plugin-visualizer'

export default defineConfig({
  plugins: [
    visualizer({
      template: 'treemap', // または 'sunburst'
      open: true, // ビルド後に自動でブラウザを開く
      gzipSize: true, // gzipサイズを表示
      brotliSize: true, // brotliサイズを表示
      filename: 'bundle-analysis.html' // 出力ファイル名
    })
  ],
  // その他の設定...
})

特徴:

• ビルド完了後に自動で分析レポートをブラウザに表示
• 複数の可視化オプション（ツリーマップ/サンバースト）
• 圧縮サイズの比較が可能

注意

TypeScriptを使用している場合、型エラーを避けるためにプラグインをas PluginOptionでキャストすることが推奨されます。

vite-bundle-visualizerのnpx利用

プロジェクト設定ファイルを変更せずに即時分析:

# 基本的な使用法
npx vite-bundle-visualizer

# カスタム設定ファイルを使用
npx vite-bundle-visualizer -c your.config.js

# 出力ファイル指定
npx vite-bundle-visualizer -o custom-report.html

# 可視化タイプ選択（sunburst/networkなど）
npx vite-bundle-visualizer -t sunburst

利用可能な可視化オプション:

オプション	説明	コマンド例
treemap	デフォルトのツリーマップ表示	npx vite-bundle-visualizer
sunburst	円環階層表示	-t sunburst
network	依存関係ネットワーク図	-t network
raw-data	JSON生データ出力	-t raw-data
list	YAML形式リスト出力	-t list

Sunburst表示の例 - パッケージ依存関係を直感的に把握

vite-bundle-analyzer

npm install --save-dev vite-bundle-analyzer

import bundleAnalyzer from 'vite-bundle-analyzer'

export default {
  plugins: [
    bundleAnalyzer()
  ]
}

特徴:

• webpack-bundle-analyzerと類似のUI
• インタラクティブなバブルチャート表示
• 依存関係のネスト構造を直感的に分析

Sonda（高度な分析）

Sondaはより詳細な分析機能を提供:

npx sonda@latest

主な特徴:

• 高度なバンドル最適化レポート
• コード分割効果の可視化
• 重複モジュールの検出
• 履歴比較機能

ベストプラクティス

1. 開発/本番の切り替え: アナライザーは常時有効にせず、必要時のみ使用

plugins: [
  process.env.ANALYZE && visualizer({ ... })
].filter(Boolean)

2. 継続的チェック: ビルドパイプラインに組み込み定期的に分析

ANALYZE=true npm run build

3. サイズ閾値アラート: 設定でサイズ制限を設定し異常増加を検知

ツール比較

ツール名	設定容易度	カスタマイズ性	追加機能
vite-bundle-visualizer	★★★★★	★★★☆☆	標準
rollup-plugin-visualizer	★★★☆☆	★★★★★	高
vite-bundle-analyzer	★★★★☆	★★★★☆	中
Sonda	★★☆☆☆	★★★★★	超高

推奨アプローチ

• 簡易分析: npx vite-bundle-visualizer
• カスタム分析: rollup-plugin-visualizerのVite統合
• プロフェッショナル分析: Sondaを活用した詳細な最適化

トラブルシューティング

エラー: Rollup plugin failed...

• 解決策1: vue-template-compilerのバージョン整合性を確認
• 解決策2: Node.jsのバージョンを16以上に更新

レポート生成されない:

// 明示的なパス指定で解決
visualizer({
  filename: path.resolve(__dirname, 'bundle-analysis.html')
})

どのツールもバンドル内の「サイズ肥大化要因」を特定し、不要な依存関係の排除やコード分割の最適化に役立ちます。定期的な分析でアプリケーションパフォーマンスを維持しましょう。