vue路由如何变为懒加载

1.这是我们通用的写法

import Vue from 'vue'
import Router from 'vue-router'
import one from '../components/one'
import two from '../components/two'
import three from '../components/three'

Vue.use(Router)
export default new Router({
     
  routes: [
    {
     
      path: '/',
      component: one
    },
    {
     
      path: '/two',
      component: two
    }, {
     
      path: '/three',
      component: three
    }
  ],
  mode:'history'
})

2.这是懒加载的写法

其实就是动态的导入我们的组件，在我们需要的时候，加以渲染，懒加载有一个好处，就是需要的时候才加载，避免了一次请求，加载过多的js文件，造成项目第一次请求的卡顿。懒加载有三种写法，其他的由于已经过时，这里就不过多书写，大家就用这种方式即可，记住 import('../components/one') 的时候，路径注意一下就好

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

Vue.use(Router)
export default new Router({
     
  routes: [
    {
     
      path: '/',
      component:()=>import('../components/one')
    },
    {
     
      path: '/two',
      component:()=>import('../components/two')
    }, {
     
      path: '/three',
      component:()=>import('../components/three')
    }
  ],
  mode:'history'
})

3.如何判断你是否成功配置了懒加载呢

3.1看看没有懒加载的时候的js代码

在项目的dist目录下的static下的js中，大家可以看到三个js文件，这里我稍加介绍一下(名字截取了部分，相信大家可以看懂哦)

• app.js 我们自己书写的的业务代码
• manifest.js 作为底层支撑的代码，因为有的浏览器不支持es6等语法，这里的底层支撑会帮我们转化我们的代码，让大部分的浏览器都能适配
• vendor 第三方组件的代码

因为没有懒加载，我们的项目在第一次访问的时候，就会加载整个app.js，当项目大了之后，第一次访问就会有卡顿的现象。
这是通过浏览器的调试查看到的

3.2 照着上面的方式，修改代码，重新编译，对比加了懒加载后的js代码
修改完，我们重新 build 一下项目 （不是重启动哦 是重新构建）

npm run-script build

可以看到，我们多了三个js文件，为什么是三个呢?因为我们上面路由的动态导入写了三个映射路径嘛，你有几个路径，到时候，就有几个对应的js

启动项目，再次访问，大家可以看到这里我们多加载了一个2.js，这就说明懒加载成功了。也有的小伙伴会疑惑，本来是一个app.js 现在是两个，哪里会更快了，不是扯淡嘛？
但其实这些多出来的js就是从app.js中抽取出来的，这样app.js小了，总体上是更快的。