feat: router matcher sort cache

[BobbieGoede]

• Related Router creation performance degradation when using many routes in comparison to v3 #2132

This PR adds the createRouterMatcherSortCache function which accepts a sorted RouterRecord array (returned from router.getRoutes() and returns a map of keys and sort index. This can be passed as restoreCache option to createRouter, if this cache is provided the path sorting is skipped when adding routes during matcher creation and the sort cache is used to restore the order after all initial routes have been added.

The sort cache and restoration is not perfect, it's more of a proof of concept, I tried to add this functionality without making any breaking changes.

The usage would be as follows:

import { createRouter, createMemoryHistory, createRouterMatcherSortCache } from "vue-router";

// during build or startup
const initialRouter = createRouter({
  history: createMemoryHistory(),
  routes,
});
const sortCache = createRouterMatcherSortCache(initialRouter.getRoutes());

// store and retrieve `sortCache` however you like ...

// on following router creations
const router = createRouter({
  history: createMemoryHistory(),
  routes,
  sortCache,
});

So far with limited testing the cache may have issues with 'duplicate' routes, there may not be enough information from records returned from getRoutes to create a fully unique key, though so far these duplicates have the same score and I don't know if the order between these have any significance. I think if the router matcher were exposed, or the matchers array directly (something like getMatchers), it may be possible to more accurately create a sort cache, I opted not to this in this iteration to keep changes to a minimum.

I have added a branch to my performance comparison which also tests router creation with cached sort [here].(https://github.com/BobbieGoede/vue-router-perf-bench/tree/feature/sort-cache-comparison). Just caching the order of the matchers greatly reduces the creation time, results on my machine:

version/routes	11	110	550	1100	2200
RouterV3	5.88ms	21.90ms	100.11ms	200.38ms	405.75ms
RouterV4	10.72ms	40.35ms	601.14ms	2386.12ms	9649.10ms
RouterV4Cached	5.26ms	32.52ms	141.46ms	275.60ms	553.46ms

This is just one of the ways router performance could be improved, I will still look into what it would like to support custom matchers and perhaps more accurate ways of precompiling the matcher. Maybe there are obvious flaws in this implementation, I'm not attached to this implementation so please let me know 😄!

[netlify]

✅ Deploy Preview for vue-router canceled.

Name	Link
🔨 Latest commit	2b3c398
🔍 Latest deploy log	https://app.netlify.com/sites/vue-router/deploys/65c4b588f03a62000861fbc8

[BobbieGoede]

This is no longer relevant as better approaches are being discussed and merged! 💪🚀