前端性能优化-番外篇-动态路由和vue-router懒加载

·  阅读 58

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第9天,点击查看活动详情

官方资料:

router.vuejs.org/zh/guide/ad…

路由懒加载和非懒加载的差别:

1、在项目中切换路由,明显可以看到,非懒加载只有在初次切换路由时加载所有的路由js文件,懒加载每次切换路由会加载新的js。(切换相同路由使用缓存不算)

在这里插入图片描述

2、打包项目后可见,非懒加载所有路由相关js都打包在0*.js文件中了,路由懒加载多出很多js,从原来0*.js文件中抽离出来,导致明显0*.js文件体积减小。

在这里插入图片描述

具体路由懒加载代码如下:

import homeRouter from './home'

let routerArray = [...homeRouter]

export default new VueRouter({
  linkActiveClass: 'on',
  mode: 'history',
  routes: routerArray
})

复制代码
const Home = resolve => require(['../../components/home'], resolve)
const Index = resolve => require(['../../components/view/index'], resolve)
const User = resolve => require(['../../components/view/user'], resolve)

let homeRouter = [
  {
    path: '/home',
    name: 'home',
    component: Home,
    redirect: '/index',
    meta: {
      requiredAuth: true
    },
    children: [
      {
        name: 'index',
        path: '/index',
        component: Index
      },
      {
        name: 'user',
        path: '/user',
        component: User
      }
    ]
  }
]

export default homeRouter

复制代码

注意:

当使用动态路由,即便写法同懒加载,但始终是非懒加载的形式,类似代码如下:

const Com = resolve => require([`../../components/view/${element.url}`], resolve)
routeArray[0].children.push({
  name: element.url.replace('/', ''),
  path: '/' + element.url,
  component: Com
})
router.addRoutes(routeArray)
复制代码

思考,大致是因为js执行[../../components/view/${element.url}]时就已经引入了吧。

疑惑

使用动态路由,目的是在配置菜单的时候,只需要在界面操作,无需修改前端代码。

但是:

  • 1、新增路由,前端没有代码也没用呀。
  • 2、且配置的时候url仍然需要和前端的文件夹名字一致。那为什么不在前端直接写死呢,然后在界面操作配置相同的名字呢。

总之:

我已经开始疑惑为什么要搞动态路由了,当初谁让我弄的啊???

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改