Vue3 路由优化，使页面初次渲染效率翻倍

3996 条路由？

addRoute函数用了大约1s才执行完毕。通过观察，发现居然有3996条路由记录。

可是项目并没有这么多的页面啊~

重复路由

let routes: Array<RouteRecordRaw> = [
  {
    path: '/promotion/ticket-list-jegotrip',
    component: () =>
      import(
        /* webpackChunkName: "promotion/ticket-list-jegotrip" */ './pages/ticket-list-jegotrip/index.vue'
      ),
  },
]

const routerFiles = import.meta.globEager('./**/routes.ts')
Object.keys(routerFiles).forEach((key) => {
  routes = [...routes, ...routerFiles[key].default]
  routes.forEach((item) => {
    router.addRoute(item)
  })
})

仔细看，这里的router.addRoute会重复添加路由，由于大部分路由没有填写name，使得addRoute的时候不会自动去重。

修复这个问题倒也简单：

routes.forEach((item) => router.addRoute(item))

const routesFiles = import.meta.globEager('./**/routes.ts')
Object.keys(routesFiles).forEach((key) => {
  const moduleRoutes = routesFiles[key].default || []
  moduleRoutes.forEach((item) => {
    router.addRoute(item)
  })
})

如果真有上千条路由怎么优化呢？

答案还是addRoute。只不过我们不在初始化阶段就添加全部路由，而是在需要的时候添加，就是beforeEach中添加：

const routesFiles = import.meta.globEager('./**/routes.ts')
const allRoutes = Object.keys(routesFiles)
  .map((key) => routesFiles[key].default || [])
  .flat(Infinity)

router.beforeEach((to, from, next) => {
  const { path } = router.resolve(to)

  if (hasAddRoute(path)) return next()

  const matchedRoute = allRoutes.find(i => i.path === path)
  if (!matchedRoute) throw `${path} 不存在`

  router.addRoute(matchedRoute)
  // https://router.vuejs.org/zh/guide/advanced/dynamic-routing.html
  return to.fullPath
})

这里还有一些优化点：

1. 如何使 hasAddRoute 的效率更高，比如做到时间复杂度为O(1)?
2. 打开一个页面后，能否预测下一个页面的路由进而提前添加，减少页面跳转时延？
3. 能否减少路由（allRoutes）生成时间？

等咱们项目真增长到这个程度再说吧，哈哈哈哈~