Vue defineAsyncComponent

当加载一个页面，页面的一个组件体积较大，并且可以按需加载，那么就可以使用按需加载对应的组件文件。Vue提供了defineAsyncComponent来处理组件按需加载，当使用了defineAsyncComponent来引入组件，这个组件的文件是和页面文件分块，是一个独立的文件，当页面显示这个组件时才加载这个文件。

效果说明

当使用了defineAsyncComponent打包后的文件如下：

可以看到HelloWorld组件是打包为单独的文件。

当页面加载时，没有使用组件按需加载时，浏览器控制台查看时这样的：

而当使用了组件按需加载：

可以看到，页面文件index少了1KB，这1KB正是HelloWord组件。当页面显示HelloWorld组件时，才去加载HelloWorld组件：

示例代码

<script setup>
  import {defineAsyncComponent, ref} from 'vue';
  // import HelloWorld from './components/HelloWorld.vue'

  const HelloWorld = defineAsyncComponent(() => import('./components/HelloWorld.vue'))

  const visible = ref(false);

  function handleClick() {
    visible.value = true;
  }
</script>

<template>
  <button @click="handleClick">click</button>
  <HelloWorld v-if="visible" msg="Vite + Vue"/>
</template>

完整代码 stackblitz.com/edit/vitejs…

Vue2

Vue2的异步组件的使用，参考 v2.cn.vuejs.org/v2/guide/co…