vue2中使用异步组件

在大型应用中，我们可能需要将应用分割成小一些的代码块，并且只在需要的时候才从服务器加载一个模块。这时就就可以使用异步组件。

1.通过import方式引入

 //组件1
 <tempalte>
    <Parent v-if="show"></Parent>
    <button @click='handleShow'>出现</button>
  </tempalte>
<script>
    export default {
        data() {
            return {
                show: false,
            }
        },
        components: {
            Parent: () => import(/*webpackChunkName:'async'*/'./chuancan/parent')
            //动态引入，将这个包命名为async，为了更好的辨识
        },
        methods: {
            handleShow() {
                console.log("出现了");
                this.show = true;
            }
        }
    }

</script>

2.使用工厂函数的方式定义组件，这个工厂函数会异步定义组件，在组件需要渲染时才进行加载。

 // 定义组件
  const AsyncComponent = ()=>({
  // 异步加载的组件
  component: import(/*webpackChunkName:'async'*/"./components/MyComponent.vue"),
  // loading状态中显示的组件
  loading: LoadingComponent,
  // 加载失败显示的组件
  error: ErrorComponent,
  // 加载组件时的延迟时间，默认值为 200ms
  delay: 200,
  // 加载组件超时时间，超时后默认使用 error 组件
  timeout: 3000
});
// 注册组件
components:{
  AsyncComponent 
}
// 使用组件
<AsyncComponent v-if='show'><AsyncComponent>
<el-button @click="show = !show">点击</el-button>

当点击了按钮后，文件才会加载出来！

vue3中使用了suspense：

<template>
  <Suspense>
    <template #default>
      <AsyncComponent />
    </template>
    <template #fallback>
      <p>loading...</p>
    </template>
  </Suspense>
</template>