Vue-router中的路由懒加载

一、为什么使用路由懒加载

当项目越来越大时，vue打包后的js文件也越来越大，这会是影响加载时间的重要因素。当构建的项目比较大的时候，懒加载可以分割代码块，提高页面的初始加载效率。

二、懒加载的实现方式

方法一 resolve

这一种方法较常见。它主要是使用了resolve的异步机制，用require代替了import,实现按需加载，下面是代码示例：

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
//     }
        {
    
    
          path: '/',
          name: 'HelloWorld',
          component: resolve => require(['@/components/HelloWorld'], resolve)
        }
  ]
}) 

方法二 官方推荐方法

const HelloWorld = () => import('@/components/HelloWorld.vue')

import Vue from 'vue'
import Router from 'vue-router'
const HelloWorld = () => import('@/components/HelloWorld.vue')

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

参考：https://www.jianshu.com/p/73f71f40b44e