yashsfcs/pulse

Was macht pulse?

PULSE ist eine Claude-Fähigkeit, die Frontend-Performance-Regressionen erkennt, bevor Ihre Benutzer sie bemerken. Sie analysiert Bundle-Statistiken und Lighthouse-Berichte, um vor jeder Bereitstellung ein sofortiges Risikourteil, die Grundursache und einsatzbereite Code-Fixes zu liefern.

Funktionen

• Automatische Regressionerkennung: Vergleicht Bundle-Größen und Lighthouse-Ergebnisse zwischen Branches, um Leistungseinbußen zu identifizieren.
• Risikourteil: Weist jeder Änderung eine Risikostufe zu (sicher/warnen/blockieren), basierend auf konfigurierbaren Schwellenwerten.
• Grundursachenanalyse: Identifiziert genau, welche Komponenten, Bibliotheken oder Änderungen die Regression verursachen.
• Einsatzbereite Korrekturen: Generiert automatisch Code-Fixes, wie z. B. Lazy-Loading-Pfade, Code-Splitting-Vorschläge oder Inline-Styling-Empfehlungen.
• CI/CD-Integration: Arbeitet nahtlos in GitHub Actions, GitLab CI, Jenkins oder jeden anderen CI/CD-Anbieter.
• Framework-agnostisch: Unterstützt React, Vue, Angular, Svelte und alle modernen Frontend-Frameworks.

Voraussetzungen

• Node.js 18 oder höher
• Ein Claude-API-Schlüssel mit Zugriff auf das claude-3-sonnet-20240229-Modell (oder neuer)
• Lighthouse CLI (npm install -g @lhci/cli)
• Optional: Bundler-Ausgabedateien (z. B. stats.json für Webpack, dist/stats.json für Vite)

Installation

# Fertigkeit global installieren
npm install -g pulsem

# Oder in Ihr Projekt als Entwicklungsabhängigkeit hinzufügen
npm install --save-dev pulsem

Verwendung

CLI

# Führe PULSE im aktuellen Verzeichnis aus
pulsem analyze

# Vergleiche zwei Branches
pulsem diff --base main --head feature/new-ui

# Führe einen Lighthouse-Audit durch
pulsem lighthouse --url https://example.com

Als Pre-Commit-Hook

Fügen Sie folgenden Eintrag in Ihre package.json ein:

{
  "husky": {
    "hooks": {
      "pre-commit": "pulsem analyze --fail-on warning"
    }
  }
}

CI/CD-Integration (GitHub Actions Beispiel)

name: Performance Check
on: [pull_request]
jobs:
  performance:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
      - run: npm ci
      - run: npm run build
      - run: npx pulsem analyze
        env:
          CLAUDE_API_KEY: ${{ secrets.CLAUDE_API_KEY }}

Optionen/Konfiguration

Erstellen Sie eine pulsem.config.js-Datei im Stammverzeichnis Ihres Projekts:

module.exports = {
  // Risikoschwellenwerte (Prozentänderung)
  thresholds: {
    warning: 10, // Warnung bei 10% Bundle-Vergrößerung
    blocking: 25, // Blockieren bei 25% Bundle-Vergrößerung
  },
  // Bundler-Konfiguration
  bundler: {
    name: 'webpack', // webpack | vite | esbuild
    statsPath: 'dist/stats.json',
  },
  // Lighthouse-Konfiguration
  lighthouse: {
    enabled: true,
    url: 'http://localhost:3000',
    thresholds: {
      performance: 0.8,
      accessibility: 0.9,
    },
  },
  // Claude-Konfiguration
  claude: {
    model: 'claude-3-sonnet-20240229',
    temperature: 0,
  },
};

Fehlerbehebung

Problem	Mögliche Ursache	Lösung
Fehler: Lighthouse nicht gefunden	Lighthouse CLI nicht installiert	npm install -g @lhci/cli
Fehler: Bundle-Statistiken nicht gefunden	Bundler-Konfiguration falsch	Überprüfen Sie den Pfad in pulsem.config.js
Fehler: Claude-API nicht erreichbar	API-Schlüssel fehlt oder ungültig	Setzen Sie CLAUDE_API_KEY Umgebungsvariable
Warnung: Keine Daten für Vergleich	Kein Basis-Branch gefunden	Verwenden Sie --base Flag

Beispielausgabe

🎯 PULSE Analyse abgeschlossen
============================
📊 Bundle-Änderungen:
   + 12.3 KB (Verwaltungskomponente)
   + 5.1 KB (Diagrammbibliothek)
   - 2.0 KB (Code-Optimierung)

⚠️ Risikourteil: **WARNEN**
   Grund: Bundle um 15.4 KB erhöht (Schwellwert: 10 KB)
   Betroffene Komponenten: UserDashboard, ReportsView

💡 Empfohlene Korrekturen:
   1. Füge Lazy-Loading für Diagrammbibliothek hinzu:
      ```jsx
      const Chart = React.lazy(() => import('./ChartComponent'));
      ```
   2. Optimiere Verwaltungskomponente durch Tree-Shaking

Lizenz

MIT