vue性能优化之异步组件

        优化方案适用于首屏加载之类的，初始化出现白屏的情况，当一个工程庞大到一定程度的时候，不去做异步分割的话，会导致初始化越来越慢。Chrome的控制台里可以看到Dom渲染的时间。

我们新建一个入口页面，引入一个子组件，然后在template中使用。

<template>
    <div class="costApplyIndexBox">
      测试
      <child></child>
    </div>
</template>

<script lang="ts">
    import { Component, Vue } from "vue-property-decorator";
    import child from "./childComponents.vue";
    @Component({
        components: {
          child
        },
        mixins: []
    })
    export default class testIndex extends Vue{

        created(){
        }

    }
</script>

这时我们去页面上面去查看，页面的加载情况，

页面上面显示只加载了一个js文件，且是我们的主入口文件，我们直接引入的child是被打包进主入口文件里面去了，跟着主入口一起被加载了。事实上，很多场景并不需要子组件和入口一起进行加载的。这个时候我们就需要对子组件进行拆分了。

什么是异步组件？顾名思义，他是一个异步加载的组件，并不是与入口组件同步加载的。

异步组件 | Vue.js

 这样，异步组件的存在，可以使得我们按需使用与加载。我们应该如何使用异步组件？Vue提供了 defineAsyncComponent  方法供我们实现。

首先现在vue.config.js中配置一下分割的条件。

        optimization:{
            splitChunks:{
                chunks: 'all', // 分割哪些类型的chunk，默认为'async'，可选值有'all'、'async'、'initial'和function
                minSize: 30000, // 单个chunk的最小体积，单位为字节（bytes），默认为30000（约30KB）
                maxSize: 0, // 单个chunk的最大体积，0表示无限制，默认为0
                maxAsyncRequests: 30, // 并行加载时最大允许的请求数量，默认为5
                maxInitialRequests: 20, // 入口点加载时最大允许的请求数量，默认为3
                automatic