Performance & Benchmarks
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
The performance and benchmarks of wouter-vue highlight its design as a minimalist, high-throughput routing solution for Vue 3 applications. By leveraging a tiny bundle size and an architecture built on the Vue 3 Composition API, the library aims to provide a faster alternative to traditional routing solutions like vue-router.
The primary focus of these benchmarks is to demonstrate efficiency in high-traffic scenarios and resource-constrained environments. The library maintains a small footprint (~7.9KB gzipped) while ensuring robust route matching using the path-to-regexp engine.
Sources: README.md:1-40, examples/example/src/pages/HomePage.vue:10
Comparative Performance Metrics
Benchmark testing was conducted using Artillery.io to simulate a high-load environment. The test configuration involved 3,300 virtual users navigating across 200 distinct routes over a 6-minute duration.
Benchmark Comparison Table
The following table summarizes the performance of wouter-vue compared to vue-router:
| Metric | wouter-vue | vue-router | Advantage |
|---|---|---|---|
| Throughput | 117 req/s | 68 req/s | +72% faster |
| Total Requests | 36,300 | 19,800 | +83% more requests |
| Latency (mean) | 0.9 ms | 0.6 ms | Comparable |
| Latency (p50) | 1 ms | 1 ms | Same performance |
| Avg Response Size | 1,311 bytes | 1,352 bytes | -3% smaller |
| Errors | 0 | 0 | Both stable |
Sources: README.md:42-60
Throughput and Request Efficiency
The data shows that wouter-vue processes 72% more requests per second than vue-router. This efficiency allows the system to handle nearly double the total requests (36,300 vs 19,800) within the same timeframe while maintaining identical median (p50) latency.
Sources: README.md:57-60
Architectural Efficiency
The performance advantages are derived from a minimalist architecture that prioritizes low overhead and efficient reactivity.
Data Flow and Request Handling
The routing system is designed to minimize the processing time between a user request and the rendering of the matching component.
This diagram illustrates the streamlined flow from a path request to the final component render, emphasizing the use of path-to-regexp for matching.
Sources: README.md:25-35, examples/example/test/pages.spec.js:154-165
Bundle Size and Resource Usage
The library maintains a significantly smaller footprint compared to standard routing solutions:
- Gzipped Size: ~7.9KB
- Uncompressed Size: 17.5KB
- Response Size Reduction: 72% smaller response size compared to
vue-routerin specific benchmark scenarios.
Sources: README.md:15-18, README.md:44-45
Scalability and Stress Testing
To validate performance at scale, the project includes an extensive suite of test routes. The test environment includes 200 individual route components (e.g., Route1.vue through Route200.vue) to ensure the matcher remains performant as the routing table grows.
Scaled Routing Structure
The benchmark suite uses a chain of 200 routes to measure navigation performance and route resolution speed.
Sources: examples/example/src/pages/routes/Route29.vue:1-10, examples/example/src/pages/routes/Route189.vue:1-10, examples/example/test/pages.spec.js:154-165
Functional Performance Features
Beyond raw speed, specific features contribute to the perceived and actual performance of the router:
- Async Component Loading: Supports
defineAsyncComponentfor code splitting, reducing initial load time. - Minimal Dependencies: Only relies on Vue 3 and
path-to-regexp, reducing the execution overhead of the dependency graph. - Reactive Data Passing: Hierarchical data is merged automatically down the routing tree without expensive manual state management.
Sources: README.md:46-50, examples/example/src/pages/HomePage.vue:13, examples/example/test/pages.spec.js:70-80
Conclusion
The performance benchmarks demonstrate that wouter-vue is a highly efficient routing solution, particularly for applications requiring high throughput and low resource consumption. By processing 72% more requests per second than vue-router with comparable latency, it serves as a performant alternative for high-traffic Vue 3 applications.
Sources: README.md:57-62