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

(资料图)

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

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

let routes: Array = [  {    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})

这里还有一些优化点：

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

关键词：