路由按需加载

一、为什么要按需加载（懒加载）

现在写的项目基本上功能模块都很多，如果没有懒加载，通过webpack打包以后的文件会很大，导致进入项目首页时，需要加载的时间特别长，非常不利于用户的体验。如果按需加载组件的话，可以有效的提高首屏加载速度。

实现的原理：不直接导入与路由相关的组件，改写成异步组件，当函数被调用的时候，才加载响应的组件内容。

二、使用

传统路由都是这样配置的：

import Vue from 'vue'
import VueRouter from 'vue-router'
import home from '@/views/home/home.vue'
Vue.use(VueRouter)
export default new VueRouter({
 routes: [
    { path: '/home', component: home }
  ]

1、按需加载：

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

2、使用import 路由懒加载

const 组件名=() => import('组件路径');

import Vue from 'vue'
import VueRouter from 'vue-router'

const  Home = ()=>  import('@/views/home/home.vue')
 
Vue.use(VueRouter)

export default new VueRouter({
 routes: [
    { path: '/home', component: Home }
  ]

 将其简化：

import Vue from 'vue'
import VueRouter from 'vue-router'
 
Vue.use(VueRouter)
export default new VueRouter({
 routes: [
    { path: '/home',  component: () => import('@/views/home/home.vue') }
  ]
 

我用到的现在就这两种，如果还有更好的方法欢迎补充