performance-profiler について
performance-profiler は、プロジェクトのコードと設定を調べてパフォーマンスのボトルネックを分析するスキルです。依存関係、バンドルサイズ、リソース使用状況などを影響度順に整理し、改善案を提示します。
主な機能
- 01依存関係の数・サイズ・状態を分析
- 02コードの性能上の問題を確認
- 03大きな未使用リソースを検出
- 04影響度順の改善レポートを作成
- 05実行可能な修正コマンドを提示
活用シーン
- 01フロントエンドのバンドル肥大化の調査
- 02冗長または古い依存関係の確認
- 03tree-shaking を妨げる barrel file の特定
- 04プロジェクトの性能改善案の取得
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/ / github.com/ wu529778790/ shenzjd-skills --skill performance-profilerインストール後、Claude Code で/performance-profilerを入力して読み込まれたか確認します。
同梱ファイルREADME.mdtemplates/report.md
詳細
パフォーマンスプロファイラー
ワンクリックでプロジェクトのパフォーマンスボトルネックを分析し、優先順位を付けた最適化の提案を出力します。
概要
プロジェクトのコードと設定をスキャンして、バンドルサイズ、依存関係の肥大化、大きなファイル、最適化されていないリソースなどのパフォーマンス問題を検出します。影響度の高い順に並べた、実行可能な最適化の提案レポートを出力します。
使用する場面
- ユーザーがプロジェクトのパフォーマンス分析を求めている
- ユーザーがバンドルサイズ、読み込みの遅さ、パフォーマンス最適化に言及している
- ユーザーがプロジェクトの速度を低下させている依存関係を知りたい
- ユーザーが
/performance-profilerを入力している - ユーザーがページの読み込みを高速化するためにバンドルサイズを削減したい
- ユーザーが未使用の依存関係を見つけて削除したい
- ユーザーが tree-shaking への barrel file の影響を確認したい
- ユーザーがパフォーマンス最適化の提案を求めている
使用しない場面:
- ユーザーがランタイムプロファイリングを求めている(New Relic、Datadog などの専用 APM ツールが必要です)
- ユーザーが負荷テストを求めている(k6、Locust、Apache Bench を使用します)
- ユーザーがコードカバレッジの確認のみを求めている(Istanbul、coverage.py などのカバレッジツールを使用します)
- ユーザーがデータベースクエリの最適化を求めている(EXPLAIN プラン、スロークエリログを使用します)
- ユーザーが Core Web Vitals の確認を求めている(Lighthouse、PageSpeed Insights を使用します)
基本パターン
ステップ 1:プロジェクトの種類を検出する
| 検出ファイル | プロジェクトの種類 | 分析の重点 |
|---|---|---|
package.json | Node.js / フロントエンド | バンドルサイズ、依存関係の数、tree-shaking |
go.mod | Go | バイナリサイズ、依存関係の数 |
requirements.txt / pyproject.toml | Python | 依存関係の数、重複する依存関係 |
ステップ 2:依存関係を分析する
# Node.js
if command -v node >/dev/null 2>&1; then
# 尝试 cost-of-modules,如果失败则使用替代方案
if npx --yes cost-of-modules 2>/dev/null; then
echo "使用 cost-of-modules 分析完成"
else
echo "⚠️ cost-of-modules 不可用,使用替代方案"
cat package.json | python3 -c "
import sys,json
d=json.load(sys.stdin)
deps=d.get('dependencies',{})
dev_deps=d.get('devDependencies',{})
print(f'Direct Dependencies: {len(deps)}')
print(f'Dev Dependencies: {len(dev_deps)}')
print(f'Total: {len(deps) + len(dev_deps)}')
# 列出前 10 个依赖
print('Top dependencies:')
for i, (name, ver) in enumerate(list(deps.items())[:10]):
print(f' {name}: {ver}')
"
fi
else
echo "⚠️ Node.js 未安装,跳过 Node.js 依赖分析"
fi
# Go
if command -v go >/dev/null 2>&1; then
echo "Go dependencies:"
go list -m all 2>/dev/null | tail -n +2 | wc -l || echo "0"
else
echo "⚠️ go 未安装,跳过 Go 依赖分析"
fi
# Python
if command -v python3 >/dev/null 2>&1; then
echo "Python dependencies:"
grep -cvE '^\s*(#|$)' requirements.txt 2>/dev/null || echo "0"
else
echo "⚠️ python3 未安装,跳过 Python 依赖分析"
fi
集計項目(templates/report.md の変数に対応):
dep_count:直接依存関係の数(Node はlen(dependencies)、Go はgo list -m allの件数、Python は requirements の行数)total_dep_count:間接依存関係を含む合計数(package-lock.json/go list -m all/pip listを解析)outdated_count:古い依存関係の数(npm outdated --json/go list -m -u all/pip list --outdated)health_score:総合スコア(依存関係の規模、古い依存関係の割合、冗長性を基に算出、0-100)deps[].size:パッケージサイズ(cost-of-modules または bundlephobia から取得。取得できない場合は空欄)- 重複する依存関係(異なるパッケージが同じ依存関係の異なるバージョンを導入している状態)
- 冗長な可能性がある依存関係
ステップ 3:コードパターンをスキャンする
フロントエンド/Node.js の重点項目:
import/requireに barrel file(すべてのモジュールを再エクスポートするindex.ts)が含まれていないか確認する- 大きな静的ファイル(500KB を超える画像/フォント)がないか確認する
- 未使用の CSS/JS ファイルがないか確認する
next.config.js/vite.config.tsの最適化設定を確認する
Go の重点項目:
- 不要な
init()関数がないか確認する - 大きな struct が値渡しされていないか確認する(ポインターに変更する必要があります)
Python の重点項目:
import *がないか確認する- 非同期コンテキスト内で同期 I/O が使われていないか確認する
ステップ 4:レポートを生成する
templates/report.md テンプレートを使用して、以下を出力します。
- 概要 — 依存関係の数、プロジェクトの健全性スコア
- 高優先度 — 影響が最も大きい問題(バンドルの肥大化、冗長な依存関係)
- 中優先度 — コードレベルの最適化ポイント
- 低優先度 — 改善の提案
- 具体的な修正コマンド — 各問題に実行可能な修正コマンドを付けます
クイックリファレンス
/performance-profiler # 分析当前项目,输出优化建议报告
よくある間違い
| 間違い | 正しい方法 | 理由 |
|---|---|---|
| 依存関係の数だけを見て、サイズを確認しない | パッケージサイズも分析する | 小さなパッケージ 10 個の方が、大きなパッケージ 1 個より適している場合があります |
| すべての devDependencies の削除を提案する | devDependencies は本番環境には含まれません | 本番環境のパフォーマンスには影響しません |
| lock ファイルを無視する | lock ファイル内の実際の依存関係ツリーを分析する | package.json の宣言内容と実際のインストール内容は異なります |
| 本番用と開発用の依存関係を区別しない | dependencies を重点的に分析する | devDependencies はバンドルに影響しません |
| barrel file の影響を無視する | index.ts の再エクスポートパターンを確認する | barrel file は tree-shaking を妨げ、バンドルサイズを大幅に増加させます |
| コード分割を考慮しない | 動的 import の使用状況を確認する | すべてのコードを単一の chunk で読み込むと、初回表示に影響します |
| 重複する依存関係をすべて削除するよう提案する | 実際の使用状況を分析してから判断する | peer dependency など、保持が必須のものもあります |
| フロントエンドのみを分析し、バックエンドを分析しない | フルスタックプロジェクトではフロントエンドとバックエンドの両方を分析する | Go/Python にもパフォーマンスの問題はあります |
| lock ファイルの分析を省略する | lock ファイルを解析して、依存関係ツリー全体を取得する | 直接依存関係が少なくても、間接依存関係が少ないとは限りません |
コメント
Markdown 対応