This is a fork of Vue Router with improved performance.
The perf-releases branch is used to make releases to the npm package @skirtle/vue-router-perf.
The package @skirtle/vue-router-perf is intended to be a drop-in replacement for vue-router. It includes performance improvements that aren't yet available in the official package.
It should be much faster for applications with large numbers of routes. The performance improvements affect both the creation of the router and the resolving of routes.
The benchmark below compares @skirtle/vue-router-perf to vue-router:
Using a Playground as a benchmark isn't entirely reliable, but it gives a sense of the improvements that are possible.
For more details of the performance improvements implemented in this fork see vuejs#2148.
Most projects won't have enough routes to see a significant benefit. Manually creating thousands of routes is rare, but tools such as @nuxtjs/i18n can automatically generate very large numbers of routes.
While @skirtle/vue-router-perf can be used directly, it is intended to be used via a resolution override instead. This tells your package manager to install @skirtle/vue-router-perf in place of vue-router. Other code can continue to import from vue-router, unaware that it is using the replacement package.
The details depend on which package manager you're using.
If you're using vue-router as a direct dependency in your project then you'll need to update that dependency to use the fork instead:
{
"dependencies": {
"vue-router": "npm:@skirtle/vue-router-perf@^0.0.0"
}
}That previous step isn't necessary if you're using vue-router indirectly, e.g. via Nuxt.
You'll then need to add the overrides option to your package.json. This ensures that your other dependencies will also use the fork, rather than pulling in a separate copy of vue-router:
{
"overrides": {
"vue-router": "npm:@skirtle/vue-router-perf@^0.0.0"
}
}Then run npm install.
If you're using vue-router as a direct dependency in your project then you'll need to update that dependency to use the fork instead:
{
"dependencies": {
"vue-router": "npm:@skirtle/vue-router-perf@^0.0.0"
}
}That previous step isn't necessary if you're using vue-router indirectly, e.g. via Nuxt.
You'll then need to add the resolutions option to your package.json. This ensures that your other dependencies will also use the fork, rather than pulling in a separate copy of vue-router:
{
"resolutions": {
"vue-router": "npm:@skirtle/vue-router-perf@^0.0.0"
}
}Then run yarn install.
Add pnpm.overrides to your package.json:
{
"pnpm": {
"overrides": {
"vue-router": "npm:@skirtle/vue-router-perf@^0.0.0"
}
}
}Then run pnpm install.
The changes in this fork can't currently be merged into the official Vue Router. They increase the bundle size (by about 2KB) and compromise the long-term maintainability of the code. It isn't worth it for the relatively small number of projects that would benefit.
Work is already underway to try to implement similar performance improvements in the official package. The first step is to make the matcher pluggable, rather than being hardcoded internally. That will allow applications to choose between extra features, performance and bundle size. See vuejs#2148 (comment) for more details.
This package exists for those who need the performance improvements now, rather than waiting.
This package should be compatible with all documented functionality of Vue Router and passes all its unit tests. There are some known differences with resolving routes in undocumented edge cases, but you're very unlikely to hit those cases in practice.
The intention is to maintain this package until Vue Router achieves similar performance.
The table below lists equivalent versions:
| vue-router | @skirtle/vue-router-perf |
|---|---|
| 4.4.3 | 0.0.0 |