vue 异步组件

什么是异步组件？

异步组件就是定义的时候什么都不做，只在组件需要渲染（组件第一次显示）的时候进行加载渲染并缓存，缓存是以备下次访问。

为什么用异步组件?

在大型应用中，功能不停地累加后，核心页面已经不堪重负，访问速度愈来愈慢。为了解决这个问题我们需要将应用分割成小一些的代码块，并且只在需要的时候才从服务器加载一个模块，从而提高页面加载速度。

Vue实现按需加载

Vue实现按需加载，官方推荐使用结合webpack的代码分割功能进行。定义为异步加载的组件，在打包的时候，会打包成单独的js文件存储在static/js文件夹里面，在调用时使用ajax请求回来插入到html中。

异步组件的写法

Vue提供了一个定义组件的工厂函数，这个工厂函数会收到一个 resolve 回调，这个回调函数会在你从服务器得到组件定义的时候被调用

写法一

Vue.component('async-webpack-example', function (resolve) {
  // 这个特殊的 `require` 语法将会告诉 webpack
  // 自动将你的构建代码切割成多个包，这些包
  // 会通过 Ajax 请求加载
  require(['./my-async-component'], resolve)
})

写法二

Vue.component('async-webpack-example',
  //import()返回一个 Promise 对象
  //import()类似于 Node 的require方法，区别主要是前者是异步加载，后者是同步加载。
  () => import('./my-async-component')
)

写法三

//局部注册
new Vue({
  components: {
    'my-component': () => import('./my-async-component')
  }
})

上示例代码：

<template>
    <div>
        <template v-if="show">
            <later></later>
            <later2></later2>
            <later3></later3>
        </template>
        <button @click="toggle">加载</button>
    </div>
</template>

<script>
    import Vue from 'vue';
    const later3 = Vue.component('later3', (resolve)=>{
        setTimeout(function () {
            require(['./later3.vue'], resolve)
        }, 4000);
    });
    export default{
        data() {
            return {
                show: false
            };
        },
        components: {
            later:(resolve)=>{require(['./later.vue'], resolve)},
            later2:(resolve)=>{
                setTimeout(function () {
                    import('./later2.vue').then(resolve)
                }, 2000);
            },
            later3,
        },
        methods: {
            toggle:function () {
                this.show = !this.show;
            }
        },
    }
</script>

异步组件一加载出来了 异步组件二加载出来了 异步组件三加载出来了

处理加载状态

异步组件工厂函数也可以返回一个如下格式的对象：

const AsyncComponent = () => ({
  // 需要加载的组件 (应该是一个 `Promise` 对象)
  component: import('./MyComponent.vue'),
  // 异步组件加载时使用的组件
  loading: LoadingComponent,
  // 加载失败时使用的组件
  error: ErrorComponent,
  // 展示加载时组件的延时时间。默认值是 200 (毫秒)
  delay: 200,
  // 如果提供了超时时间且组件加载也超时了，
  // 则使用加载失败时使用的组件。默认值是：`Infinity`
  timeout: 3000
})

路由懒加载(页面按需加载)

// /router/index.js

routes: [
    {
      path: '/dzp',
      name: 'Dzp',
      component: ()=>import('../components/Dzp.vue') 
      //import()返回一个 Promise 对象
      //import()类似于 Node 的require方法，区别主要是前者是异步加载，后者是同步加载。
    },
    {
      path: '/rule/:id',
      name: 'Rule',
      component: ()=>import('../components/Rule.vue')
    }
]