前端优化中的路由懒加载

柔情只为你懂 2022-12-15 03:38 109阅读 0赞

### 懒加载： ###

> 也叫延迟加载，即在需要的时候进行加载，随用随载。 使用懒加载的原因： vue 是单页面应用，使用webpcak打包后的文件很大，会使进入首页时，加载的资源过多，页面会出现白屏的情况，不利于用户体验。运用懒加载后，就可以按需加载页面，提高用户体验

#### 非懒加载的路由配置： ####

import Vue from 'vue'
    import Router from 'vue-router'
    import DefaultIndex from '@/components/DefaultIndex'
    import Index from '@/components/Index'
    Vue.use(Router)
    export default new Router({ 
      mode: 'history',
      routes: [
       { 
          path: '/',
          component: 'DefaultIndex ',
          children: [
            { 
              path: '',
              component: 'Index'
            },
            { 
              path: '*',
              redirect: '/Index'
            }
          ]
    })

#### 懒加载的写法： ####

//最流行的写法，es6语法
    import Vue from 'vue'
    import Router from 'vue-router'
    Vue.use(Router)
    export default new Router({ 
      mode: 'history',
      routes: [
       { 
          path: '/',
          component: ()=>import('@/components/DefaultIndex') ,
          children: [
            { 
              path: '',
              component: ()=>import('@/components/Index')
             },
            { 
              path: '*',
              redirect: '/Index'
            }
          ]
    })
    
    //或者下次这样 AMD规范
    import Vue from 'vue'
    import Router from 'vue-router'
    Vue.use(Router)
    export default new Router({ 
      mode: 'history',
      routes: [
       { 
          path: '/',
          component: resolve => require(['@/components/DefaultIndex'],resolve),
          children: [
            { 
              path: '',
              component: resolve => require(['@/components/Index'],resolve)
            },
            { 
              path: '*',
              redirect: '/Index'
            }
          ]
    })