为什么要使用？

在使用vue-cli构建项目，在默认情况下，执行 npm run build/yarn build会将所有的js打包成一个整体，这样情况下单页面第一次加载页面会耗费太多时间，导致页面长时间处于空白情况。所以通常的写法都是按需加载，来提高加载速度
此适用于项目比较大的情况下，如果就只有几个页面的情况，建议不适用异步加载模块的方式，加载模块

异步全局挂载

import {
    
     createApp, defineAsyncComponent } from 'vue'
import component from './Component'
let Vue = createApp(component);

defineAsyncComponent 是3.0 提供的异步挂载全局组件的方案
第一种方式：

import Logo from './components/common/Logo' //引入组件
defineAsyncComponent 是3.0 提供的异步挂载全局组件的方案
let asyncCom = defineAsyncComponent(() => new Promise((resolve, reject) => {
    
    
    setTimeout(() => {
    
               //计时器
     resolve(Logo);
   }, 1000);
 }));
  Vue.component('v-logo',asyncCom);
  Vue.mount('#app')

第二种方式：

let asyncCom = defineAsyncComponent(() => new Promise((resolve, reject) => {
    
    
  //require 告诉webpack去异步加载组件 
  require(['./components/common/Logo'], resolve);
}));
Vue.component('v-logo', asyncCom);
Vue.mount('#app')

第三种方式：

let asyncCom=defineAsyncComponent(()=>import('./components/common/Logo'));
 Vue.component('v-logo',asyncCom);
 Vue.mount('#app')

引入文件,进行挂载

<template>
   <div id="App">
      <!-- 挂在的组件 写的时候和标签一致 -->
     <AsyncCom></AsyncCom>   
   </div>
</template>
<script>
//要注册组件 先引入组件
//@ 路径代表 src开发目录   或者 可以相对  ./
// key：value
import AsyncCom from './components/asynccomponent'
export default {
    
    
  name: 'App',
  components:{
    
    
    AsyncCom
  }
}
</script>

<style>
#App{
    
    
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
</style>

异步局部挂载

在当前组件内部使用components属性直接声明挂载

<template>
  <div id="asyncInfo">
    局部挂载异步组件
  <v-alert></v-alert> 
  </div>
</template>
<script>
// 局部的异步挂载
import alert from './common/Alert'
export default {
    
    
  name: "asyncInfo",
  components: {
    
    
    'v-alert':()=>import("./common/Alert")  2.x无效
    "v-alert": defineAsyncComponent(() => import("./common/Alert")),
};
}
</script>
<style>
</style>

Alert文件：

<template>
  <div id="alertinfo">弹框组件</div>
</template>
<script>
export default {
    
    
  name: "alertinfo",
};
</script>
<style>
</style>

vue 异步挂载

为什么要使用？

异步全局挂载

异步局部挂载

おすすめ