vue项目实现路由懒加载(按需加载)的方式汇总

当构建的项目比较大的时候,为了给客户更好的客户体验,使用路由懒加载提高页面的初始加载效率,解决白屏问题。懒加载简单来说就是延迟加载或按需加载,即在需要的时候的时候进行加载。这里汇总了常见的几种vue中路由懒加载的方法。

未使用懒加载

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component:HelloWorld
    }
  ]
})

懒加载方式一:resolve

它主要是使用了resolve的异步机制,用require代替了import,实现按需加载,下面是代码示例:

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
  routes: [
     {
       path: '/',
       name: 'HelloWorld',
       component: HelloWorld+
     }
    {
       path: '/',
       name: 'HelloWorld',
       component: resolve => require(['@/components/HelloWorld'], resolve)
    }
  ]
}) 

懒加载方式二:import

Vue Router官网提供的一种方法

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)
export default new Router({
  routes: [
        {
          path: '/',
          name: 'HelloWorld',
          component: () => import('@/components/HelloWorld.vue')
        }
  ]
}) 

懒加载方式三:require.ensure

使用webpack的require.ensure技术,也可以实现按需加载。

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)
export default new Router({
  routes: [
        {
          path: '/',
          name: 'HelloWorld',
          component: resolve => require.ensure([], () => resolve(require('@/components/'+componentName)), 'webpackChunkName')
        }
  ]
}) 

 r就是resolve,路由也是正常的写法  这种是官方推荐的写的,按模块划分懒加载 

const list = r => require.ensure([], () => r(require('../components/list/')), 'list');

const router = new Router({
    routes: [
        {
           path: '/list/',
           component: list,
           name: 'blog'
        }
    ]
})
© 版权声明
THE END
喜欢就支持以下吧
点赞0
分享
评论 抢沙发