Vue中的懒加载和按需加载

1. 懒加载

• 懒加载也叫延迟加载，即在需要的时候进行加载，随用随载。
• vue项目打包的时候，如果项目比较庞大，那么将会打出一个很大的包，速度比较慢，这个时候可以考虑拆分，不要把所有的内容都打到一个包里面去。
• 1.路由懒加载：
  我们平常使用router可能如下：

import Vue from 'vue'
import Router from 'vue-router'
import index from '@/components/index'
Vue.use(Router);
export default new Router({
    routes: [
        {
            path: '/index',
            name: 'index',
            component: index,
            meta: {
                title: 'index'
            }
        }
    ]
})

先用import引入，然后在component里面配，这种其实是同步模式，也就是说你这样写，index.vue组件里的代码会被打入总包里面。
还有一种和上面类似的同步写法，使用require去写的：

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router);
export default new Router({
    routes: [
        {
            path: '/index',
            name: 'index',
            component: require('@/components/index').default,
            meta: {
                title: 'index'
            }
        }
    ]
})

如果要从总包里分出去，就要用到异步加载组件，改造起来也很简单：

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router);
export default new Router({
    routes: [
        {
            path: '/index',
            name: 'index',
            component: ()=>import('@/components/index'),
            meta: {
                title: 'index'
            }
        }
    ]
})

改造之后，我们打包的时候就会发现多出来一些js:

然后请求异步路由的时候，也会发现额外请求了js:

这表示异步路由的内容被单独打包出来了，只在跳转在当前路由的时候加载。

还有一种异步请求的写法：

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

注意()=>import (’./index.vue’)和(resolve)=>require([’./index.vue’],resolve)这两种写法，两者实现异步的机制不一样，内部处理逻辑也不同。

//import()返回promise,利用promise的then执行异步
const fn=()=>import('./index.vue');
fn.then(function(item){
    console.log(item)
});
//返回不是promise,利用普通的回调执行异步
const fn=(resolve)=>require (['./index.vue'],resolve);
fn(function(item){
    console.log(item);
});

• 2.组件懒加载：
  除了路由可以实现懒加载，组件的引用其实也可以分出去，我们先来看看平常的组件引用：

components:{
    index:require('./index.vue').default,
},

可以改造成异步请求，让它的打包代码从主包中分割出去：

components:{
    index:()=>import ('./index.vue'),//方式1
    index:(resolve)=>require (['./index.vue'],resolve),//方式2
},

不过注意异步加载组件，组件就不是立马出现，而是要等一会才能出现，会出现一个短暂空白，这种根据情况具体使用。