How to apply lazy loading of vue3 vite asynchronous components and routing

1. Preface

1-1. Three changes:

• Changes in the asynchronous component declaration method: Vue 3.x adds a new auxiliary function defineAsyncComponent, Used to display the declaration of asynchronous components

• The component option in the advanced declaration method of asynchronous components is renamed to loader

• The component loading function bound by loader is not Then receive resolve and reject parameters, and must return a Promise

1-2. The reason for introducing the auxiliary function defineAsyncComponent:

Now, in Vue 3, due to the function Components are defined as pure functions, async component definitions need to be explicitly defined by wrapping them in a new defineAsyncComponent helper.

2. Comparison of Vue 2.x and Vue 3.x definitions

2-1. Comparison of asynchronous component/routing definitions

• ##2-1 -1. In Vue 2.x, just declare an asynchronous component like this:

const asyncPage = () => import('./views/home.vue')

Copy after login

Copy after login

• 2-1-2. In Vue 3.x, The import of asynchronous components requires explicit declaration using the auxiliary function defineAsyncComponent. As follows:

<template>
  <div>
    <h2>Async Components</h2>
    <p>异步组件测试</p>
    <child />
  </div>
</template>
<script>
import { defineAsyncComponent } from &#39;vue&#39;
const child = defineAsyncComponent(() => import(&#39;@/components/async-component-child.vue&#39;))
export default {
  name: &#39;async-components&#39;,
  components:{
    &#39;child&#39;: child
  }
};
</script>

Copy after login

• 2-2-1.The declaration of asynchronous components in Vue 2.x is A more advanced way of declaring. As follows:

const asyncPageWithOptions  = {
  component: () => import('./views/home.vue'),
  delay: 200,
  timeout: 3000,
  error: ErrorComponent,
  loading: LoadingComponent
}

Copy after login

const asyncPage = () => import('./views/home.vue')

const asyncPageWithOptions  = {
  component: () => import('./views/home.vue')
}

• 2-2 -2. Asynchronous components can also be declared like this in Vue 3.x. Only the component needs to be changed to loader. As follows:

const asyncPageWithOptions  = defineAsyncComponent({
  loader: () => import('./views/home.vue'),
  delay: 200,
  timeout: 3000,
  error: ErrorComponent,
  loading: LoadingComponent
})

Copy after login

• 2-3-1. Received in Vue 2.x resolve and reject:

// 2.x version
const oldAsyncComponent = (resolve, reject) => {
  /* ... */
}

Copy after login

• 2-3-2. In Vue 3.x always returns Promise:

// 3.x version
const asyncComponent = defineAsyncComponent(
  () => new Promise((resolve, reject) => {
      /* ... */
  })
)

Copy after login

// 在 Vue 3.x 中不适用
export default {
  components: {
    asyncPage: resolve => require(['@/components/list.vue'], resolve)
  },
}

• 3-1-1.defineAsyncComponent method

// router/index.js
import { defineAsyncComponent } from 'vue'
const _import = (path) => defineAsyncComponent(() => import(`../views/${path}.vue`));
const routes = [
  {
    path: '/async-component',
    name: 'asyncComponent',
    component: _import('home'),
  }
];

Copy after login

• 3-1-2.import.meta.glob method

// 1.上面的方法相当于一次性加载了 views 目录下的所有.vue文件，返回一个对象
const modules = import.meta.glob('../views/*/*.vue');
const modules ={
    "../views/about/index.vue": () => import("./src/views/about/index.vue")
}
// 2.动态导入的时候直接，引用
const router = createRouter({
  history: createWebHistory(),
  routes: [
    // ...
    {
      path: 'xxxx',
      name: 'xxxxx',
      // 原来的方式，这个在开发中可行，但是生产中不行
      // component: () => import(`../views${menu.file}`),
      // 改成下面这样
      component: modules[`../views${filename}`]
    }
    // ...          
  ],
})

Copy after login

<template>
  <div>
    <h2>Async Components</h2>
    <p>异步组件测试</p>
    <child></child>
  </div>
</template>
<script>
import { defineAsyncComponent } from &#39;vue&#39;
const child = defineAsyncComponent(() => import(&#39;@/components/async-component-child.vue&#39;))
export default {
  name: &#39;async-components&#39;,
  components:{
    &#39;child&#39;: child
  }
};
</script>

Copy after login

The above is the detailed content of How to apply lazy loading of vue3 vite asynchronous components and routing. For more information, please follow other related articles on the PHP Chinese website!