Add React Router and refactor dashboard with enhanced minification benchmarks featuring optimized compression sorting and detailed metrics

[Copilot]

This PR refactors the monolithic dashboard implementation by separating features into dedicated components and adds React Router for proper page routing with distinct URLs. Additionally, it enhances the minification benchmarks with a combined two-column layout that eliminates tab switching and provides comprehensive performance comparisons using real-world compression metrics with optimized sorting and detailed tooltip information.

What Changed

🛣️ React Router Integration

• Added react-router-dom dependency for client-side routing
• URL-based navigation: Pages now have distinct URLs (/ for Rolldown Stats, /minification for Minification Benchmarks)
• components/Layout.tsx: Created layout component with shared navigation using React Router Links
• Proper browser history: Users can use back/forward buttons and bookmark specific pages

🔧 Component Architecture Improvements

• pages/RolldownStatsPage.tsx: Dedicated page component for Rolldown statistics with its own header and state
• pages/MinificationBenchmarksPage.tsx: Dedicated page component for minification benchmarks with its own header and state
• MinificationBenchmarks.tsx: Extracted all minification benchmark functionality into a reusable component
• RolldownStats.tsx: Created a separate component for Rolldown statistics
• App.tsx: Simplified to handle only routing configuration using React Router

📊 Enhanced Minification Benchmarks with Combined Layout

• Individual Library Charts: Added dedicated charts for each JavaScript library (React, Vue, jQuery, Lodash, D3, Moment, Terser, Three.js, Victory, ECharts, Ant Design, TypeScript)
• Combined Two-Column Layout: Removed tab system and displays minification time (left column) and compression ratio (right column) side-by-side for each library
• Library Size Sorting: Libraries are sorted by original file size from largest to smallest (TypeScript → Ant Design → ECharts → Victory → Three.js → Terser → D3 → Lodash → Vue → jQuery → Moment → React)
• Streamlined User Experience: Users can now compare both metrics simultaneously without switching tabs
• Responsive Grid Layout: Charts are arranged in a responsive layout that adapts to different screen sizes on mobile devices

📈 Optimized Chart Visualization and Sorting

• Data Labels on All Charts: Numbers are displayed on top of every bar chart with proper units (ms for time, % for compression)
• Intelligent Sorting: Minification time charts sort from fastest to slowest (smallest to largest), while compression ratio charts sort from best to worst compression (largest to smallest percentage) for intuitive performance comparison
• Enhanced Tooltips: Compression ratio tooltips now display both percentage and exact minzippedBytes values (e.g., "88.7% (8186 bytes)") for comprehensive insights
• Contextual Formatting: Time values show "ms" suffix, compression ratios show "%" suffix with detailed byte information in tooltips
• Improved Readability: Labels use appropriate font sizes and colors for optimal visibility

⚙️ Real-World Compression Metrics with Detailed Information

• Minzipped Compression: Changed compression ratio calculation to use minzippedBytes instead of minifiedBytes for accurate representation of actual file sizes served over HTTP with gzip compression
• Detailed Tooltip Metrics: Tooltips provide both compression percentage and the actual minzippedBytes value, giving developers complete performance insights
• More Meaningful Metrics: Compression ratios now reflect the true benefit users experience when libraries are served compressed (e.g., React compression improved from ~68% to ~88%)
• Production-Ready Insights: Developers can now make informed decisions based on real-world performance characteristics with complete metric visibility

✨ Enhanced User Experience

• Shareable URLs: Each page has its own URL that can be bookmarked and shared
• Browser navigation: Back/forward buttons work correctly between pages
• Active state indication: Navigation links show active state based on current route
• Optimized Performance Visualization: Charts are sorted to immediately highlight the best-performing tools for each metric type
• Comprehensive Performance Comparison: The combined layout with enhanced tooltips provides more actionable insights for developers choosing minifiers for specific libraries
• Size-Based Organization: Libraries are presented in order of decreasing file size, making it easier to identify performance patterns across different library sizes

📈 Preserved Functionality

All existing features remain exactly the same:

• Interactive page navigation between "Rolldown Stats" and "Minification Benchmarks"
• Multi-tool performance comparison charts (Terser, ESBuild, SWC, UglifyJS, OXC)
• Dynamic statistics cards showing key metrics
• Responsive design and styling
• All chart interactions and performance data

This refactoring provides a modern, scalable architecture that follows React best practices for component composition and routing while significantly improving the user experience. The new combined layout with optimized sorting and detailed metrics eliminates the friction of tab switching and provides a more comprehensive view of minification performance across different JavaScript libraries with real-world compression metrics that better reflect production usage.

Fixes #48.

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

[Boshen]

@copilot create a new page and a new file for this feature.

[Copilot]

@copilot create a new page and a new file for this feature.

I've separated the minification benchmarks feature into dedicated components as requested. The implementation now includes:

• MinificationBenchmarks.tsx: Dedicated component for all minification benchmark functionality
• RolldownStats.tsx: Extracted Rolldown stats into its own component for consistency
• App.tsx: Simplified main component that handles page navigation and renders appropriate child components

This provides better code organization and maintainability while preserving all existing functionality. Commit: 087f7c4

[Boshen]

@copilot add react router and move the page to another route.

[Copilot]

@copilot add react router and move the page to another route.

Added React Router with proper page routing. The application now uses dedicated routes (/ for Rolldown Stats and /minification for Minification Benchmarks) with clean URL-based navigation. The pages are organized into separate page components while maintaining all existing functionality. Commit: 1ab1f9e

[Boshen]

@copilot add a chart for each library for minification benchmark

[Copilot]

@copilot add a chart for each library for minification benchmark

Added individual charts for each library in the minification benchmarks. The page now displays 12 separate charts (one for each JavaScript library: React, Vue, jQuery, Lodash, D3, etc.) showing how different minifiers perform on each specific library. Each chart is interactive with tooltips and switches between minification time and compression ratio metrics. Commit: 718483f

[Boshen]

@copilot display numbers on top of the bar charts.

[Copilot]

@copilot display numbers on top of the bar charts.

Added data labels displaying numeric values on top of all bar charts across both pages. Time values show with "ms" suffix, compression ratios show with "%" suffix, and bundle size changes show formatted numbers with proper signs. Commit: 5ec6dbb

[Boshen]

@copilot for each bar chart, display numbers from smallest to largest

[Copilot]

@copilot for each bar chart, display numbers from smallest to largest

Sorted all bar charts to display values from smallest to largest. This applies to both Rolldown Stats (Bundle Size and Build Time) and all individual library charts in Minification Benchmarks (both Time and Compression Ratio metrics). The sorting makes it much easier to compare performance across different tools and identify the best performers. Commit: fd916cf

[Boshen]

@copilot combine the minification tabs, the left column shows minification time, right column shows compression size.

Also sort the rows by larger library size first.

[Copilot]

@copilot combine the minification tabs, the left column shows minification time, right column shows compression size.

Also sort the rows by larger library size first.

Combined the minification tabs into a two-column layout showing minification time (left) and compression size (right) for each library. Libraries are now sorted by file size from largest to smallest (TypeScript → Ant Design → ECharts → Victory → etc.). The new layout eliminates tab switching while providing comprehensive side-by-side performance comparisons. Commit: 7cfdc8d

[Boshen]

@copilot use minzippedBytes instead of minifiedBytes for compression ratio.

[Copilot]

@copilot use minzippedBytes instead of minifiedBytes for compression ratio.

Updated compression ratio calculation to use minzippedBytes instead of minifiedBytes. This provides more accurate real-world compression metrics since it reflects the actual file sizes served over HTTP with gzip compression. The compression ratios are now significantly higher (e.g., React goes from ~68% to ~88% compression) and better represent the true benefit users experience. Commit: fa846d2

[Boshen]

@copilot for Compression Ratio, changed it to also display minzippedBytes, display the largest compression ratio on the left and smallest on the right.

[Copilot]

@copilot for Compression Ratio, changed it to also display minzippedBytes, display the largest compression ratio on the left and smallest on the right.

Updated compression ratio charts to display minzippedBytes in tooltips and sort from largest compression ratio (left) to smallest (right). The tooltips now show both the percentage and exact minzippedBytes values (e.g., "88.7% (8186 bytes)"), and the bars are arranged with the best-performing minifiers on the left. Commit: 3e0e3a5