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')

• 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>

2-2. Comparison of declaration methods

• 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
}

So, the following asynchronous component declaration:

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

is equivalent to:

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
})

2-3. Asynchronous component loading function returns comparison

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

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

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

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

Vue 3.x's asynchronous component loading function will no longer receive resolve and reject, and must always return Promise. In other words, in Vue 3.x, it is no longer supported to receive resolve callbacks through factory functions to define asynchronous components.

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

3. Vue3 practice

Tips: If you use the Vite tool to build the project, use import to do routing lazy loading during local development. It can be loaded normally, but a warning will be reported; package it to production. The environment will report an error and the page will not be displayed normally. You can use the following two methods to achieve this.

3-1. Routing lazy loading implementation

• 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'),
  }
];

• 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}`]
    }
    // ...          
  ],
})

3-2.Asynchronous component implementation

<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>

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!