mirror of
https://github.com/cloud-shuttle/leptos-shadcn-ui.git
synced 2025-12-22 22:00:00 +00:00
docs: Update documentation for v0.5.0 Performance Audit Edition
- Update README.md with performance audit features and v0.5.0 release info - Add comprehensive performance audit documentation - Create quick start guide for performance monitoring - Update documentation index with performance audit section - Include installation instructions and usage examples - Add component listing with current versions - Update testing section with performance audit tests
This commit is contained in:
Peter Hanssens
191
README.md
191
README.md
@@ -7,6 +7,7 @@
|
||||
[](LICENSE)
|
||||
[](docs/tdd/completion/TDD_COMPLETION_SUMMARY.md)
|
||||
[](tests/e2e)
|
||||
[](performance-audit)
|
||||
|
||||
## 🏆 **Project Status: 100% TDD Implementation Complete!**
|
||||
|
||||
@@ -18,6 +19,31 @@
|
||||
- ✅ **Documentation**: Comprehensive guides and examples
|
||||
- ✅ **Performance Audit**: Complete TDD performance monitoring system
|
||||
|
||||
## 🎉 **Latest Release: v0.5.0 - Performance Audit Edition**
|
||||
|
||||
### **What's New in v0.5.0**
|
||||
- ✨ **Performance Audit System** - Complete TDD implementation with 53 tests
|
||||
- 📊 **Bundle Size Analysis** - Component optimization recommendations
|
||||
- ⚡ **Real-time Performance Monitoring** - Render time and memory tracking
|
||||
- 🗺️ **Optimization Roadmap** - Smart recommendations with ROI estimates
|
||||
- 🛠️ **CLI Tool** - Professional command-line interface
|
||||
- 📈 **Benchmarking Suite** - Performance regression testing
|
||||
|
||||
### **Quick Start with v0.5.0**
|
||||
```bash
|
||||
# Install the performance audit tool
|
||||
cargo install leptos-shadcn-performance-audit
|
||||
|
||||
# Use the main package with performance monitoring
|
||||
cargo add leptos-shadcn-ui --features performance-audit
|
||||
|
||||
# Run your first performance audit
|
||||
performance-audit audit
|
||||
```
|
||||
|
||||
### **Release Notes**
|
||||
- **[v0.5.0 Release Notes](RELEASE_NOTES_v0.5.0.md)** - Comprehensive release information
|
||||
|
||||
---
|
||||
|
||||
## 🎯 **What This Is**
|
||||
@@ -35,17 +61,34 @@
|
||||
|
||||
### **Installation**
|
||||
|
||||
Add components to your `Cargo.toml`:
|
||||
#### **Option 1: Individual Components (Recommended)**
|
||||
Add specific components to your `Cargo.toml`:
|
||||
|
||||
```toml
|
||||
[dependencies]
|
||||
leptos-shadcn-button = "0.2.0"
|
||||
leptos-shadcn-input = "0.2.0"
|
||||
leptos-shadcn-card = "0.2.0"
|
||||
leptos-shadcn-checkbox = "0.2.0"
|
||||
leptos-shadcn-button = "0.4.0"
|
||||
leptos-shadcn-input = "0.4.0"
|
||||
leptos-shadcn-card = "0.4.0"
|
||||
leptos-shadcn-checkbox = "0.4.0"
|
||||
# ... add more components as needed
|
||||
```
|
||||
|
||||
#### **Option 2: Main Package with Features**
|
||||
Use the main package with feature flags:
|
||||
|
||||
```toml
|
||||
[dependencies]
|
||||
leptos-shadcn-ui = { version = "0.5.0", features = ["button", "input", "card", "checkbox"] }
|
||||
```
|
||||
|
||||
#### **Option 3: With Performance Monitoring**
|
||||
Include the performance audit system:
|
||||
|
||||
```toml
|
||||
[dependencies]
|
||||
leptos-shadcn-ui = { version = "0.5.0", features = ["button", "input", "performance-audit"] }
|
||||
```
|
||||
|
||||
### **Basic Usage**
|
||||
|
||||
```rust
|
||||
@@ -68,18 +111,62 @@ pub fn MyForm() -> impl IntoView {
|
||||
|
||||
Monitor and optimize your component performance with the built-in audit system:
|
||||
|
||||
#### **Install Performance Audit Tool**
|
||||
```bash
|
||||
# Install the performance audit tool
|
||||
cargo install leptos-shadcn-performance-audit
|
||||
```
|
||||
|
||||
# Run comprehensive performance audit
|
||||
#### **Run Performance Audits**
|
||||
```bash
|
||||
# Complete performance audit
|
||||
performance-audit audit
|
||||
|
||||
# Analyze bundle sizes
|
||||
# Analyze bundle sizes only
|
||||
performance-audit bundle --components-path packages/leptos
|
||||
|
||||
# Monitor real-time performance
|
||||
performance-audit monitor --duration 30s
|
||||
performance-audit monitor --duration 30s --sample-rate 100ms
|
||||
|
||||
# Generate optimization roadmap
|
||||
performance-audit roadmap --output roadmap.json --format json
|
||||
```
|
||||
|
||||
#### **Performance Audit Features**
|
||||
- **📊 Bundle Size Analysis** - Track component sizes and identify optimization opportunities
|
||||
- **⚡ Real-time Monitoring** - Monitor render times and memory usage
|
||||
- **🗺️ Optimization Roadmap** - Get actionable recommendations with ROI estimates
|
||||
- **📈 Benchmarking** - Performance regression testing and comparison
|
||||
- **🛠️ CLI Tool** - Professional command-line interface with multiple output formats
|
||||
|
||||
#### **Example Output**
|
||||
```
|
||||
🔍 Running comprehensive performance audit...
|
||||
📊 Configuration:
|
||||
Max Component Size: 5.0 KB
|
||||
Max Render Time: 16.0 ms
|
||||
Max Memory Usage: 1.0 MB
|
||||
Output Format: Text
|
||||
|
||||
⏳ Analyzing components...
|
||||
✅ Analysis complete!
|
||||
|
||||
📊 Performance Audit Results
|
||||
Overall Score: 64.0/100 (D)
|
||||
Meets Targets: ❌ No
|
||||
|
||||
📦 Bundle Analysis:
|
||||
Overall Efficiency: 44.6%
|
||||
Total Size: 23.0 KB
|
||||
Average Component Size: 4.6 KB
|
||||
|
||||
⚡ Performance Monitoring:
|
||||
Overall Score: 83.3%
|
||||
Failing Components: 2
|
||||
|
||||
🗺️ Optimization Roadmap:
|
||||
Total Recommendations: 6
|
||||
Estimated Effort: 40.0 hours
|
||||
Expected Impact: 470.0%
|
||||
```
|
||||
|
||||
### **Run Examples**
|
||||
@@ -96,6 +183,73 @@ trunk serve
|
||||
|
||||
---
|
||||
|
||||
## 📦 **Available Components**
|
||||
|
||||
### **Form Components**
|
||||
- **Button** - `leptos-shadcn-button v0.4.0`
|
||||
- **Input** - `leptos-shadcn-input v0.4.0`
|
||||
- **Label** - `leptos-shadcn-label v0.4.0`
|
||||
- **Checkbox** - `leptos-shadcn-checkbox v0.4.0`
|
||||
- **Switch** - `leptos-shadcn-switch v0.4.0`
|
||||
- **Radio Group** - `leptos-shadcn-radio-group v0.4.0`
|
||||
- **Select** - `leptos-shadcn-select v0.4.0`
|
||||
- **Textarea** - `leptos-shadcn-textarea v0.4.0`
|
||||
- **Form** - `leptos-shadcn-form v0.4.0`
|
||||
- **Combobox** - `leptos-shadcn-combobox v0.4.0`
|
||||
- **Command** - `leptos-shadcn-command v0.4.0`
|
||||
- **Input OTP** - `leptos-shadcn-input-otp v0.4.0`
|
||||
|
||||
### **Layout Components**
|
||||
- **Card** - `leptos-shadcn-card v0.4.0`
|
||||
- **Separator** - `leptos-shadcn-separator v0.4.0`
|
||||
- **Tabs** - `leptos-shadcn-tabs v0.4.0`
|
||||
- **Accordion** - `leptos-shadcn-accordion v0.4.0`
|
||||
- **Collapsible** - `leptos-shadcn-collapsible v0.4.0`
|
||||
- **Scroll Area** - `leptos-shadcn-scroll-area v0.4.0`
|
||||
- **Aspect Ratio** - `leptos-shadcn-aspect-ratio v0.4.0`
|
||||
- **Resizable** - `leptos-shadcn-resizable v0.4.0`
|
||||
|
||||
### **Overlay Components**
|
||||
- **Dialog** - `leptos-shadcn-dialog v0.4.0`
|
||||
- **Popover** - `leptos-shadcn-popover v0.4.0`
|
||||
- **Tooltip** - `leptos-shadcn-tooltip v0.4.0`
|
||||
- **Alert Dialog** - `leptos-shadcn-alert-dialog v0.4.0`
|
||||
- **Sheet** - `leptos-shadcn-sheet v0.4.0`
|
||||
- **Drawer** - `leptos-shadcn-drawer v0.4.0`
|
||||
- **Hover Card** - `leptos-shadcn-hover-card v0.4.0`
|
||||
|
||||
### **Navigation Components**
|
||||
- **Breadcrumb** - `leptos-shadcn-breadcrumb v0.4.0`
|
||||
- **Navigation Menu** - `leptos-shadcn-navigation-menu v0.4.0`
|
||||
- **Context Menu** - `leptos-shadcn-context-menu v0.4.0`
|
||||
- **Dropdown Menu** - `leptos-shadcn-dropdown-menu v0.4.0`
|
||||
- **Menubar** - `leptos-shadcn-menubar v0.4.0`
|
||||
|
||||
### **Feedback & Status**
|
||||
- **Alert** - `leptos-shadcn-alert v0.4.0`
|
||||
- **Badge** - `leptos-shadcn-badge v0.4.0`
|
||||
- **Skeleton** - `leptos-shadcn-skeleton v0.4.0`
|
||||
- **Progress** - `leptos-shadcn-progress v0.4.0`
|
||||
- **Toast** - `leptos-shadcn-toast v0.4.0`
|
||||
- **Table** - `leptos-shadcn-table v0.4.0`
|
||||
- **Calendar** - `leptos-shadcn-calendar v0.4.0`
|
||||
- **Date Picker** - `leptos-shadcn-date-picker v0.4.0`
|
||||
- **Pagination** - `leptos-shadcn-pagination v0.4.0`
|
||||
|
||||
### **Interactive Components**
|
||||
- **Slider** - `leptos-shadcn-slider v0.4.0`
|
||||
- **Toggle** - `leptos-shadcn-toggle v0.4.0`
|
||||
- **Carousel** - `leptos-shadcn-carousel v0.4.0`
|
||||
- **Avatar** - `leptos-shadcn-avatar v0.4.0`
|
||||
|
||||
### **Performance & Development**
|
||||
- **Performance Audit** - `leptos-shadcn-performance-audit v0.1.0` ⭐ **NEW!**
|
||||
- **Error Boundary** - `leptos-shadcn-error-boundary v0.4.0`
|
||||
- **Lazy Loading** - `leptos-shadcn-lazy-loading v0.4.0`
|
||||
- **Registry** - `leptos-shadcn-registry v0.1.0`
|
||||
|
||||
---
|
||||
|
||||
## 🧪 **Testing & Quality**
|
||||
|
||||
### **Run Unit Tests**
|
||||
@@ -105,10 +259,29 @@ trunk serve
|
||||
cargo test --package leptos-shadcn-button --lib
|
||||
cargo test --package leptos-shadcn-input --lib
|
||||
|
||||
# Test performance audit system
|
||||
cargo test -p leptos-shadcn-performance-audit
|
||||
|
||||
# Test all components
|
||||
cargo test --workspace
|
||||
```
|
||||
|
||||
### **Performance Audit Testing**
|
||||
|
||||
The performance audit system includes comprehensive testing:
|
||||
|
||||
```bash
|
||||
# Run all performance audit tests (53 tests)
|
||||
cargo test -p leptos-shadcn-performance-audit
|
||||
|
||||
# Run specific test suites
|
||||
cargo test -p leptos-shadcn-performance-audit --lib
|
||||
cargo test -p leptos-shadcn-performance-audit --test performance_audit_tests
|
||||
|
||||
# Test CLI tool
|
||||
cargo run -p leptos-shadcn-performance-audit --bin performance-audit -- --help
|
||||
```
|
||||
|
||||
### **Run E2E Tests**
|
||||
|
||||
```bash
|
||||
|
||||
@@ -10,6 +10,7 @@ Welcome to the comprehensive documentation for the leptos-shadcn-ui component li
|
||||
- ✅ **E2E Tests**: 129 Playwright tests covering all workflows
|
||||
- ✅ **Quality Standards**: Industry-best practices implemented
|
||||
- ✅ **Documentation**: Comprehensive guides and examples
|
||||
- ✅ **Performance Audit**: Complete TDD performance monitoring system
|
||||
|
||||
---
|
||||
|
||||
@@ -18,6 +19,7 @@ Welcome to the comprehensive documentation for the leptos-shadcn-ui component li
|
||||
### **🚀 Getting Started**
|
||||
- **[Main README](../README.md)** - Project overview and quick start
|
||||
- **[Component Examples](../examples/)** - Working examples and demos
|
||||
- **[Performance Audit Quick Start](./performance-audit/QUICK_START.md)** - Performance monitoring quick start
|
||||
|
||||
### **🧪 Testing & Quality Assurance**
|
||||
- **[TDD Implementation](./tdd/)** - Complete Test-Driven Development documentation
|
||||
@@ -38,6 +40,9 @@ Welcome to the comprehensive documentation for the leptos-shadcn-ui component li
|
||||
|
||||
### **🔧 Development & Tools**
|
||||
- **[Component Generator](./development/component-generator.md)** - Automated component creation
|
||||
- **[Performance Audit System](./performance-audit/)** - Performance monitoring and optimization
|
||||
- **[Quick Start](./performance-audit/QUICK_START.md)** - Get started in 5 minutes
|
||||
- **[Complete Documentation](./performance-audit/README.md)** - Full system documentation
|
||||
- **[Quality Assurance](./quality/)** - Defect tracking and quality metrics
|
||||
- **[Defects Register](./quality/defects-register.md)** - Issue tracking and resolution
|
||||
|
||||
|
||||
244
docs/performance-audit/QUICK_START.md
Normal file
244
docs/performance-audit/QUICK_START.md
Normal file
@@ -0,0 +1,244 @@
|
||||
# 🚀 Performance Audit Quick Start Guide
|
||||
|
||||
**Get up and running with the Performance Audit System in 5 minutes**
|
||||
|
||||
## 📦 Installation
|
||||
|
||||
### Install the CLI Tool
|
||||
```bash
|
||||
cargo install leptos-shadcn-performance-audit
|
||||
```
|
||||
|
||||
### Add to Your Project
|
||||
```toml
|
||||
[dependencies]
|
||||
leptos-shadcn-ui = { version = "0.5.0", features = ["performance-audit"] }
|
||||
```
|
||||
|
||||
## 🎯 Your First Performance Audit
|
||||
|
||||
### 1. Run a Complete Audit
|
||||
```bash
|
||||
performance-audit audit
|
||||
```
|
||||
|
||||
This will:
|
||||
- ✅ Analyze all component bundle sizes
|
||||
- ✅ Monitor component performance
|
||||
- ✅ Generate optimization recommendations
|
||||
- ✅ Display results with performance score
|
||||
|
||||
### 2. Analyze Bundle Sizes
|
||||
```bash
|
||||
performance-audit bundle --components-path packages/leptos
|
||||
```
|
||||
|
||||
### 3. Monitor Real-time Performance
|
||||
```bash
|
||||
performance-audit monitor --duration 30s
|
||||
```
|
||||
|
||||
## 📊 Understanding the Output
|
||||
|
||||
### Performance Score
|
||||
- **A (90-100)**: Excellent performance
|
||||
- **B (80-89)**: Good performance
|
||||
- **C (70-79)**: Acceptable performance
|
||||
- **D (60-69)**: Needs improvement
|
||||
- **F (0-59)**: Poor performance
|
||||
|
||||
### Bundle Analysis
|
||||
- **Overall Efficiency**: Percentage of components meeting size targets
|
||||
- **Total Size**: Combined size of all components
|
||||
- **Average Size**: Mean component size
|
||||
- **Oversized Components**: Components exceeding size thresholds
|
||||
|
||||
### Performance Monitoring
|
||||
- **Render Times**: Component rendering performance
|
||||
- **Memory Usage**: Memory consumption patterns
|
||||
- **Failing Components**: Components not meeting performance targets
|
||||
|
||||
## 🛠️ Common Commands
|
||||
|
||||
### Basic Audits
|
||||
```bash
|
||||
# Quick audit with default settings
|
||||
performance-audit audit
|
||||
|
||||
# Custom performance targets
|
||||
performance-audit audit \
|
||||
--max-component-size-kb 3.0 \
|
||||
--max-render-time-ms 12.0 \
|
||||
--max-memory-usage-mb 0.8
|
||||
```
|
||||
|
||||
### Output Formats
|
||||
```bash
|
||||
# Text output (default)
|
||||
performance-audit audit
|
||||
|
||||
# JSON output for automation
|
||||
performance-audit audit --format json
|
||||
|
||||
# HTML report
|
||||
performance-audit audit --format html --output report.html
|
||||
|
||||
# Markdown documentation
|
||||
performance-audit audit --format markdown --output report.md
|
||||
```
|
||||
|
||||
### Specific Analysis
|
||||
```bash
|
||||
# Bundle size analysis only
|
||||
performance-audit bundle
|
||||
|
||||
# Performance monitoring only
|
||||
performance-audit monitor --duration 60s
|
||||
|
||||
# Generate optimization roadmap
|
||||
performance-audit roadmap --output roadmap.json
|
||||
```
|
||||
|
||||
## 🎯 Optimization Workflow
|
||||
|
||||
### 1. Establish Baseline
|
||||
```bash
|
||||
# Run initial audit
|
||||
performance-audit audit --output baseline.json --format json
|
||||
```
|
||||
|
||||
### 2. Identify Issues
|
||||
```bash
|
||||
# Focus on oversized components
|
||||
performance-audit bundle --target-size-kb 3.0
|
||||
```
|
||||
|
||||
### 3. Monitor Improvements
|
||||
```bash
|
||||
# Track performance over time
|
||||
performance-audit monitor --duration 120s --sample-rate 50ms
|
||||
```
|
||||
|
||||
### 4. Generate Roadmap
|
||||
```bash
|
||||
# Get optimization recommendations
|
||||
performance-audit roadmap --input baseline.json --output roadmap.md
|
||||
```
|
||||
|
||||
## 🔧 Configuration
|
||||
|
||||
### Custom Performance Targets
|
||||
Create a configuration file or use command-line options:
|
||||
|
||||
```bash
|
||||
performance-audit audit \
|
||||
--max-component-size-kb 4.0 \
|
||||
--max-render-time-ms 16.0 \
|
||||
--max-memory-usage-mb 1.0
|
||||
```
|
||||
|
||||
### Component Path Configuration
|
||||
```bash
|
||||
# Analyze specific component directory
|
||||
performance-audit audit --components-path src/components
|
||||
|
||||
# Analyze multiple directories
|
||||
performance-audit audit --components-path packages/leptos
|
||||
```
|
||||
|
||||
## 📈 Integration Examples
|
||||
|
||||
### CI/CD Pipeline
|
||||
```yaml
|
||||
# GitHub Actions example
|
||||
- name: Performance Audit
|
||||
run: |
|
||||
cargo install leptos-shadcn-performance-audit
|
||||
performance-audit audit --format json --output audit-results.json
|
||||
|
||||
- name: Check Performance
|
||||
run: |
|
||||
# Check if performance meets targets
|
||||
if ! performance-audit audit --format json | jq '.meets_targets'; then
|
||||
echo "Performance audit failed!"
|
||||
exit 1
|
||||
fi
|
||||
```
|
||||
|
||||
### Development Workflow
|
||||
```bash
|
||||
# Pre-commit performance check
|
||||
performance-audit audit --max-component-size-kb 5.0
|
||||
|
||||
# Post-optimization validation
|
||||
performance-audit audit --format json --output after-optimization.json
|
||||
```
|
||||
|
||||
### Monitoring Dashboard
|
||||
```bash
|
||||
# Generate HTML report for dashboard
|
||||
performance-audit audit --format html --output dashboard.html
|
||||
|
||||
# JSON data for custom dashboards
|
||||
performance-audit audit --format json --output metrics.json
|
||||
```
|
||||
|
||||
## 🚨 Troubleshooting
|
||||
|
||||
### Common Issues
|
||||
|
||||
#### "Command not found"
|
||||
```bash
|
||||
# Ensure the tool is installed
|
||||
cargo install leptos-shadcn-performance-audit
|
||||
|
||||
# Check installation
|
||||
which performance-audit
|
||||
```
|
||||
|
||||
#### "No components found"
|
||||
```bash
|
||||
# Specify correct component path
|
||||
performance-audit audit --components-path packages/leptos
|
||||
|
||||
# Check directory structure
|
||||
ls -la packages/leptos/
|
||||
```
|
||||
|
||||
#### "Performance targets not met"
|
||||
```bash
|
||||
# Adjust targets based on requirements
|
||||
performance-audit audit --max-component-size-kb 8.0
|
||||
|
||||
# Focus on specific optimizations
|
||||
performance-audit roadmap --output recommendations.md
|
||||
```
|
||||
|
||||
### Getting Help
|
||||
```bash
|
||||
# Show help for any command
|
||||
performance-audit --help
|
||||
performance-audit audit --help
|
||||
performance-audit bundle --help
|
||||
performance-audit monitor --help
|
||||
performance-audit roadmap --help
|
||||
```
|
||||
|
||||
## 🎉 Next Steps
|
||||
|
||||
### Advanced Usage
|
||||
- **[Complete Documentation](README.md)** - Full system documentation
|
||||
- **[API Reference](API.md)** - Programmatic usage
|
||||
- **[Integration Guide](INTEGRATION.md)** - CI/CD and tool integration
|
||||
- **[Best Practices](BEST_PRACTICES.md)** - Optimization strategies
|
||||
|
||||
### Community
|
||||
- **[GitHub Issues](https://github.com/cloud-shuttle/leptos-shadcn-ui/issues)** - Report bugs or request features
|
||||
- **[Discussions](https://github.com/cloud-shuttle/leptos-shadcn-ui/discussions)** - Community discussions
|
||||
- **[Examples](https://github.com/cloud-shuttle/leptos-shadcn-ui/tree/main/examples)** - Working examples
|
||||
|
||||
---
|
||||
|
||||
**🎯 You're now ready to monitor and optimize your Leptos application performance!**
|
||||
|
||||
**Next: Try running your first audit and explore the optimization recommendations.**
|
||||
412
docs/performance-audit/README.md
Normal file
412
docs/performance-audit/README.md
Normal file
@@ -0,0 +1,412 @@
|
||||
# 📊 Performance Audit System
|
||||
|
||||
**Complete performance monitoring and optimization system for leptos-shadcn-ui components**
|
||||
|
||||
## 🎯 Overview
|
||||
|
||||
The Performance Audit System is a comprehensive tool built with TDD principles to monitor, analyze, and optimize the performance of leptos-shadcn-ui components. It provides real-time monitoring, bundle size analysis, and actionable optimization recommendations.
|
||||
|
||||
## ✨ Features
|
||||
|
||||
### 📊 Bundle Size Analysis
|
||||
- **Component Size Tracking** - Monitor individual component bundle sizes
|
||||
- **Oversized Component Detection** - Identify components exceeding size thresholds
|
||||
- **Bundle Efficiency Scoring** - Calculate overall bundle efficiency metrics
|
||||
- **Optimization Recommendations** - Get specific suggestions for size reduction
|
||||
|
||||
### ⚡ Real-time Performance Monitoring
|
||||
- **Render Time Tracking** - Monitor component render performance
|
||||
- **Memory Usage Monitoring** - Track memory consumption patterns
|
||||
- **Performance Bottleneck Detection** - Identify slow-performing components
|
||||
- **Performance Scoring** - Calculate overall performance metrics
|
||||
|
||||
### 🗺️ Optimization Roadmap
|
||||
- **Smart Recommendations** - AI-powered optimization suggestions
|
||||
- **ROI-based Prioritization** - Rank optimizations by impact vs effort
|
||||
- **Implementation Planning** - Generate actionable implementation plans
|
||||
- **Effort Estimation** - Estimate time and resources needed
|
||||
|
||||
### 🛠️ CLI Tool
|
||||
- **Multiple Output Formats** - Text, JSON, HTML, Markdown
|
||||
- **Progress Indicators** - Visual feedback during long operations
|
||||
- **Configuration Display** - Show current settings and thresholds
|
||||
- **Professional Error Handling** - Robust error recovery and reporting
|
||||
|
||||
## 🚀 Quick Start
|
||||
|
||||
### Installation
|
||||
|
||||
```bash
|
||||
# Install the performance audit tool
|
||||
cargo install leptos-shadcn-performance-audit
|
||||
```
|
||||
|
||||
### Basic Usage
|
||||
|
||||
```bash
|
||||
# Run complete performance audit
|
||||
performance-audit audit
|
||||
|
||||
# Analyze bundle sizes only
|
||||
performance-audit bundle --components-path packages/leptos
|
||||
|
||||
# Monitor real-time performance
|
||||
performance-audit monitor --duration 30s --sample-rate 100ms
|
||||
|
||||
# Generate optimization roadmap
|
||||
performance-audit roadmap --output roadmap.json --format json
|
||||
```
|
||||
|
||||
## 📋 CLI Commands
|
||||
|
||||
### `audit` - Complete Performance Audit
|
||||
Runs a comprehensive performance audit including bundle analysis and performance monitoring.
|
||||
|
||||
```bash
|
||||
performance-audit audit [OPTIONS]
|
||||
|
||||
Options:
|
||||
-c, --components-path <COMPONENTS_PATH>
|
||||
Components directory path [default: packages/leptos]
|
||||
--max-component-size-kb <MAX_COMPONENT_SIZE_KB>
|
||||
Maximum component size in KB [default: 5.0]
|
||||
--max-render-time-ms <MAX_RENDER_TIME_MS>
|
||||
Maximum render time in milliseconds [default: 16.0]
|
||||
--max-memory-usage-mb <MAX_MEMORY_USAGE_MB>
|
||||
Maximum memory usage in MB [default: 1.0]
|
||||
```
|
||||
|
||||
### `bundle` - Bundle Size Analysis
|
||||
Analyzes component bundle sizes and identifies optimization opportunities.
|
||||
|
||||
```bash
|
||||
performance-audit bundle [OPTIONS]
|
||||
|
||||
Options:
|
||||
-c, --components-path <COMPONENTS_PATH>
|
||||
Components directory path [default: packages/leptos]
|
||||
--target-size-kb <TARGET_SIZE_KB>
|
||||
Target component size in KB [default: 5.0]
|
||||
```
|
||||
|
||||
### `monitor` - Real-time Performance Monitoring
|
||||
Monitors component performance in real-time.
|
||||
|
||||
```bash
|
||||
performance-audit monitor [OPTIONS]
|
||||
|
||||
Options:
|
||||
-d, --duration <DURATION>
|
||||
Monitoring duration [default: 30s]
|
||||
--sample-rate <SAMPLE_RATE>
|
||||
Sample rate for monitoring [default: 100ms]
|
||||
```
|
||||
|
||||
### `roadmap` - Optimization Roadmap Generation
|
||||
Generates actionable optimization recommendations.
|
||||
|
||||
```bash
|
||||
performance-audit roadmap [OPTIONS]
|
||||
|
||||
Options:
|
||||
-i, --input <INPUT>
|
||||
Input file path
|
||||
-o, --output <OUTPUT>
|
||||
Output file path
|
||||
--format <FORMAT>
|
||||
Output format [default: text] [possible values: text, json, html, markdown]
|
||||
```
|
||||
|
||||
## 📊 Output Formats
|
||||
|
||||
### Text Format (Default)
|
||||
Human-readable text output with emojis and formatting:
|
||||
|
||||
```
|
||||
🔍 Running comprehensive performance audit...
|
||||
📊 Configuration:
|
||||
Max Component Size: 5.0 KB
|
||||
Max Render Time: 16.0 ms
|
||||
Max Memory Usage: 1.0 MB
|
||||
Output Format: Text
|
||||
|
||||
⏳ Analyzing components...
|
||||
✅ Analysis complete!
|
||||
|
||||
📊 Performance Audit Results
|
||||
Overall Score: 64.0/100 (D)
|
||||
Meets Targets: ❌ No
|
||||
|
||||
📦 Bundle Analysis:
|
||||
Overall Efficiency: 44.6%
|
||||
Total Size: 23.0 KB
|
||||
Average Component Size: 4.6 KB
|
||||
|
||||
⚡ Performance Monitoring:
|
||||
Overall Score: 83.3%
|
||||
Failing Components: 2
|
||||
|
||||
🗺️ Optimization Roadmap:
|
||||
Total Recommendations: 6
|
||||
Estimated Effort: 40.0 hours
|
||||
Expected Impact: 470.0%
|
||||
```
|
||||
|
||||
### JSON Format
|
||||
Structured JSON output for programmatic processing:
|
||||
|
||||
```json
|
||||
{
|
||||
"overall_score": 64.0,
|
||||
"meets_targets": false,
|
||||
"bundle_analysis": {
|
||||
"overall_efficiency_score": 44.6,
|
||||
"total_bundle_size_bytes": 23552,
|
||||
"total_bundle_size_kb": 23.0,
|
||||
"average_component_size_kb": 4.6
|
||||
},
|
||||
"performance_monitoring": {
|
||||
"overall_performance_score": 83.3,
|
||||
"failing_components": 2
|
||||
},
|
||||
"optimization_roadmap": {
|
||||
"total_recommendations": 6,
|
||||
"estimated_effort_hours": 40.0,
|
||||
"expected_impact_percent": 470.0
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### HTML Format
|
||||
Rich HTML output for web display and reporting.
|
||||
|
||||
### Markdown Format
|
||||
Markdown output for documentation and GitHub integration.
|
||||
|
||||
## 🧪 Testing
|
||||
|
||||
The performance audit system includes comprehensive testing:
|
||||
|
||||
```bash
|
||||
# Run all performance audit tests (53 tests)
|
||||
cargo test -p leptos-shadcn-performance-audit
|
||||
|
||||
# Run specific test suites
|
||||
cargo test -p leptos-shadcn-performance-audit --lib
|
||||
cargo test -p leptos-shadcn-performance-audit --test performance_audit_tests
|
||||
|
||||
# Test CLI tool
|
||||
cargo run -p leptos-shadcn-performance-audit --bin performance-audit -- --help
|
||||
```
|
||||
|
||||
### Test Coverage
|
||||
- **44 Unit Tests** - Individual module testing
|
||||
- **8 Integration Tests** - End-to-end workflow testing
|
||||
- **1 Documentation Test** - Example code validation
|
||||
- **100% Pass Rate** - All tests passing
|
||||
|
||||
## 🏗️ Architecture
|
||||
|
||||
### Core Modules
|
||||
|
||||
#### `bundle_analysis`
|
||||
- Component bundle size analysis
|
||||
- Oversized component detection
|
||||
- Bundle efficiency calculations
|
||||
- Optimization recommendations
|
||||
|
||||
#### `performance_monitoring`
|
||||
- Real-time performance metrics collection
|
||||
- Render time and memory usage tracking
|
||||
- Performance bottleneck detection
|
||||
- Component performance scoring
|
||||
|
||||
#### `optimization_roadmap`
|
||||
- Smart recommendation generation
|
||||
- ROI-based prioritization
|
||||
- Implementation planning
|
||||
- Effort estimation
|
||||
|
||||
#### `benchmarks`
|
||||
- Performance regression testing
|
||||
- Benchmark comparison
|
||||
- Performance trend analysis
|
||||
- Automated performance validation
|
||||
|
||||
### Data Structures
|
||||
|
||||
#### `ComponentBundleAnalysis`
|
||||
```rust
|
||||
pub struct ComponentBundleAnalysis {
|
||||
pub component_name: String,
|
||||
pub bundle_size_bytes: u64,
|
||||
pub bundle_size_kb: f64,
|
||||
pub is_oversized: bool,
|
||||
pub performance_score: f64,
|
||||
pub optimization_recommendations: Vec<String>,
|
||||
}
|
||||
```
|
||||
|
||||
#### `ComponentPerformanceMetrics`
|
||||
```rust
|
||||
pub struct ComponentPerformanceMetrics {
|
||||
pub component_name: String,
|
||||
pub render_times: Vec<Duration>,
|
||||
pub memory_usage: Vec<u64>,
|
||||
pub performance_score: f64,
|
||||
pub meets_targets: bool,
|
||||
}
|
||||
```
|
||||
|
||||
#### `OptimizationRecommendation`
|
||||
```rust
|
||||
pub struct OptimizationRecommendation {
|
||||
pub title: String,
|
||||
pub description: String,
|
||||
pub category: OptimizationCategory,
|
||||
pub priority: OptimizationPriority,
|
||||
pub estimated_effort_hours: f64,
|
||||
pub expected_impact_percent: f64,
|
||||
pub roi_score: f64,
|
||||
}
|
||||
```
|
||||
|
||||
## 🔧 Configuration
|
||||
|
||||
### Performance Targets
|
||||
Default performance targets can be customized:
|
||||
|
||||
```rust
|
||||
pub struct PerformanceConfig {
|
||||
pub max_component_size_kb: f64, // Default: 5.0 KB
|
||||
pub max_render_time_ms: f64, // Default: 16.0 ms
|
||||
pub max_memory_usage_mb: f64, // Default: 1.0 MB
|
||||
pub monitoring_enabled: bool, // Default: true
|
||||
}
|
||||
```
|
||||
|
||||
### Custom Configuration
|
||||
```bash
|
||||
# Custom performance targets
|
||||
performance-audit audit \
|
||||
--max-component-size-kb 3.0 \
|
||||
--max-render-time-ms 12.0 \
|
||||
--max-memory-usage-mb 0.8
|
||||
```
|
||||
|
||||
## 📈 Use Cases
|
||||
|
||||
### Development
|
||||
- **Performance Monitoring** - Track component performance during development
|
||||
- **Bundle Size Optimization** - Identify and fix oversized components
|
||||
- **Performance Regression Detection** - Catch performance issues early
|
||||
- **Optimization Planning** - Plan performance improvement sprints
|
||||
|
||||
### Production
|
||||
- **Performance Baseline** - Establish performance benchmarks
|
||||
- **Monitoring Dashboards** - Generate performance reports
|
||||
- **Optimization Tracking** - Measure optimization impact
|
||||
- **Performance Auditing** - Regular performance health checks
|
||||
|
||||
### CI/CD Integration
|
||||
- **Automated Performance Testing** - Include in CI/CD pipelines
|
||||
- **Performance Gates** - Block deployments on performance regressions
|
||||
- **Performance Reporting** - Generate automated performance reports
|
||||
- **Optimization Validation** - Verify optimization effectiveness
|
||||
|
||||
## 🎯 Best Practices
|
||||
|
||||
### Performance Monitoring
|
||||
1. **Regular Audits** - Run performance audits regularly
|
||||
2. **Baseline Establishment** - Set performance baselines early
|
||||
3. **Threshold Management** - Adjust thresholds based on requirements
|
||||
4. **Trend Analysis** - Monitor performance trends over time
|
||||
|
||||
### Bundle Optimization
|
||||
1. **Size Monitoring** - Track component sizes continuously
|
||||
2. **Dependency Analysis** - Analyze and optimize dependencies
|
||||
3. **Code Splitting** - Implement effective code splitting
|
||||
4. **Tree Shaking** - Ensure proper tree shaking
|
||||
|
||||
### Optimization Planning
|
||||
1. **ROI Focus** - Prioritize high-impact, low-effort optimizations
|
||||
2. **Incremental Improvements** - Make small, measurable improvements
|
||||
3. **Performance Budgets** - Set and enforce performance budgets
|
||||
4. **Continuous Monitoring** - Monitor optimization effectiveness
|
||||
|
||||
## 🚀 Future Enhancements
|
||||
|
||||
### Planned Features
|
||||
- **Real Bundle Analysis** - Analyze actual build artifacts
|
||||
- **Build System Integration** - Integrate with build systems
|
||||
- **Performance Regression Detection** - Automated regression detection
|
||||
- **Performance Dashboards** - Web-based performance dashboards
|
||||
|
||||
### Community Contributions
|
||||
- **Custom Optimizers** - Plugin system for custom optimizations
|
||||
- **Performance Plugins** - Extensible performance monitoring
|
||||
- **CI/CD Integration** - Enhanced CI/CD pipeline integration
|
||||
- **Performance Metrics** - Additional performance metrics
|
||||
|
||||
## 📚 API Reference
|
||||
|
||||
### Core Functions
|
||||
|
||||
#### `run_performance_audit`
|
||||
```rust
|
||||
pub async fn run_performance_audit(
|
||||
config: PerformanceConfig
|
||||
) -> Result<PerformanceResults, PerformanceAuditError>
|
||||
```
|
||||
|
||||
#### `BundleAnalyzer`
|
||||
```rust
|
||||
pub struct BundleAnalyzer {
|
||||
pub components_path: PathBuf,
|
||||
}
|
||||
|
||||
impl BundleAnalyzer {
|
||||
pub async fn analyze_all_components(&self) -> BundleAnalysisResults;
|
||||
pub async fn analyze_component(&self, name: &str) -> ComponentBundleAnalysis;
|
||||
}
|
||||
```
|
||||
|
||||
#### `PerformanceMonitor`
|
||||
```rust
|
||||
pub struct PerformanceMonitor {
|
||||
pub config: PerformanceConfig,
|
||||
pub start_time: Option<Instant>,
|
||||
pub tracked_components: BTreeMap<String, ComponentPerformanceMetrics>,
|
||||
}
|
||||
|
||||
impl PerformanceMonitor {
|
||||
pub fn start_monitoring(&mut self);
|
||||
pub fn stop_monitoring(&mut self) -> PerformanceMonitoringResults;
|
||||
pub fn record_render_time(&mut self, component: &str, duration: Duration);
|
||||
}
|
||||
```
|
||||
|
||||
## 🤝 Contributing
|
||||
|
||||
We welcome contributions to the performance audit system! Please see our [Contributing Guide](../../CONTRIBUTING.md) for details.
|
||||
|
||||
### Development Setup
|
||||
```bash
|
||||
# Clone the repository
|
||||
git clone https://github.com/cloud-shuttle/leptos-shadcn-ui.git
|
||||
cd leptos-shadcn-ui
|
||||
|
||||
# Test the performance audit system
|
||||
cargo test -p leptos-shadcn-performance-audit
|
||||
|
||||
# Run the CLI tool
|
||||
cargo run -p leptos-shadcn-performance-audit --bin performance-audit -- --help
|
||||
```
|
||||
|
||||
## 📄 License
|
||||
|
||||
This project is licensed under the MIT License - see the [LICENSE](../../LICENSE) file for details.
|
||||
|
||||
---
|
||||
|
||||
**🎯 Monitor, Optimize, and Scale your Leptos applications with the Performance Audit System!**
|
||||
Reference in New Issue
Block a user