Perfsee：バイトダンスがオープンソース化したフロントエンド性能分析プラットフォーム
プロジェクト概要
Perfsee は、バイトダンス（ByteDance）がオープンソース化したフロントエンド性能測定・デバッグツールです。ビルド分析からランタイム性能モニタリングまで、包括的な性能分析ソリューションを提供します。
他の性能ツールと比較して、Perfsee の特徴は Webpack Bundle 分析、Lighthouse スコアリング、Flamegraph 火焰图 を1つのプラットフォームに統合し、完全な性能分析クローズドループを形成している点です。
主要機能
📦 Bundle 分析
- Webpack パッケージ結果の可視化
- 冗長な依存関係と大きすぎるモジュールの特定
- マルチバージョンビルドの比較サポート
🔥 Flamegraph（火焰图）
- Chrome DevTools Performance パネルベース
- 直感的な CPU 消費時間分析
- React/Vue コンポーネントレベルの性能プロファイリング
🚦 Lighthouse 統合
- 自動 Lighthouse 性能監査実行
- 性能スコアの履歴トレンド追跡
- カスタム監査設定のサポート
📊 性能モニタリング
- 継続的インテグレーションでの性能回帰検出
- ベースライン比較とアラートメカニズム
- マルチプロジェクト、マルチ環境管理のサポート
技術的ハイライト
| 機能 | 説明 |
|---|---|
| フレームワーク非依存 | React、Vue、Angular など主要フレームワークをサポート |
| CI/CD 統合 | GitHub Actions、GitLab CI などのプラグインを提供 |
| プライベートデプロイ | 企業内デプロイをサポートし、データの自律性を確保 |
| TypeScript | 完全な型サポート、充実した API ドキュメント |
クイックスタート
# CLI をインストール
npm install -g @perfsee/cli
# プロジェクトを分析
perfsee bundle ./dist
# または CI に統合
perfsee upload --project my-project ./dist適用シナリオ
- ビルド最適化：パッケージサイズを分析し、読み込み速度を最適化
- 性能回帰検出：CI で各コミットの性能影響を監視
- 性能ボトルネックの特定：火焰图で時間がかかる操作を発見
- チーム性能ガバナンス：性能ベースラインとスコアリングシステムの構築
プロジェクトデータ
- ⭐ Stars: 740
- 🍴 Forks: 43
- 💻 言語: TypeScript
- 📅 最終更新: 2026年3月（非常にアクティブ）
- 🏢 メンテナ: バイトダンス
- 📜 ライセンス: Apache 2.0
関連リンク
- GitHub: https://github.com/perfsee/perfsee
- 公式サイト: https://perfsee.com
- ドキュメント: GitHub README を参照
フロントエンド性能に関心のある開発者にとって、Perfsee は試す価値のあるツールです。複数の性能分析次元を統合し、複数のツール間を行き来する手間を省きます。