mcpField
B
bundle-size-optimization

bundle-size-optimization

github.com/aj-geddes開発373563 回インストール34 週間前に更新
リポジトリ

bundle-size-optimization について

ビルドやパフォーマンスを最適化するための開発スキルです。JavaScript バンドルの分析と縮小を扱い、分析や最適化、実施手順のガイドを含みます。

主な機能

  1. 01バンドル構成の分析
  2. 02バンドル最適化手法
  3. 03実施方針のガイド
  4. 04デプロイ前分析のガイド

活用シーン

  1. 01デプロイ前のバンドルサイズ確認
  2. 02モバイル性能の改善
  3. 03依存関係追加の影響評価

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/aj-geddes/useful-ai-prompts --skill bundle-size-optimization

インストール後、Claude Code で/bundle-size-optimizationを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
best-practices.md
bundle-analysis.md
implementation-strategy.md
optimization-techniques.md
templates/
component-template.tsx

詳細

バンドルサイズの最適化

目次

概要

バンドルを小さくすると、ダウンロード、解析、実行が速くなり、特にネットワークが遅い環境で体感パフォーマンスが大幅に向上します。

使用する場面

  • ビルドプロセスの最適化
  • デプロイ前のバンドル分析
  • パフォーマンスのベースライン改善
  • モバイルのパフォーマンスを重視する場合
  • 新しい依存関係を追加した後

クイックスタート

最小限の動作例：

// Analyze bundle composition

class BundleAnalysis {
  analyzeBundle() {
    return {
      tools: [
        "webpack-bundle-analyzer",
        "Source Map Explorer",
        "Bundle Buddy",
        "Bundlephobia",
      ],
      metrics: {
        total_size: "850KB gzipped",
        main_js: "450KB",
        main_css: "120KB",
        vendor: "250KB",
        largest_lib: "moment.js (67KB)",
      },
      breakdown: {
        react: "85KB (10%)",
        lodash: "45KB (5%)",
        moment: "67KB (8%)",
        other: "653KB (77%)",
      },
    };
// ... (see reference guides for full implementation)

リファレンスガイド

詳細な実装については、references/ ディレクトリを参照してください：

ガイド内容
バンドル分析バンドル分析
最適化手法最適化手法
実装戦略実装戦略
ベストプラクティスベストプラクティス

ベストプラクティス

✅ 推奨事項
  • 確立されたパターンと規約に従います
  • クリーンで保守しやすいコードを書きます
  • 適切なドキュメントを追加します
  • デプロイ前に十分にテストします
❌ 避けること
  • テストや検証を省略します
  • エラー処理を無視します
  • 設定値をハードコードします

コメント

Markdown 対応