vue3异步代码块加载加上Suspense

原创已于 2023-02-23 00:14:12 修改 · 214 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2023-02-23 00:09:10 首次发布

前端专栏收录该内容

5 篇文章

订阅专栏

本文展示了如何在Vue应用中使用Suspense组件来处理异步组件的加载，当组件加载失败时显示加载中提示，成功后则显示组件内容。定义了一个名为asyncCom的异步组件，并通过defineAsyncComponent和import动态导入。同时，利用webpack的chunkName优化加载性能。

<template>
// 可以在异步组件没有加载或者加载失败的情况下显示想要的加载中模块
 <Suspense>
 	//  失败的状态
    <template #fallback>
      <h1>正在加载</h1>
    </template>
    // 成功的状态
    <template #default>
      <asyncCom />
    </template>
  </Suspense>
  <AsyncComponent />
</template>

<script>
// 局部注册异步代码块
import { defineAsyncComponent } from "vue";
// eslint-disable-next-line
let p = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(import(/*webpackChunkName:'asyncCom'*/ "./AsyncCom.vue"));
  }, 2000);
});
let asyncCom = defineAsyncComponent(() => p);
export default {
  data() {
    return { };
  },
  components: {
    // asyncCom,
    AsyncComponent: defineAsyncComponent(() =>
      import(/*webpackChunkName:'asyncCom'*/ "./AsyncCom.vue")
    ),
  },
};
</script>