vue3 vite 비동기 구성 요소 및 라우팅의 지연 로딩을 적용하는 방법

1. 서문

1-1. 세 가지 변경 사항:

• 비동기 구성 요소 선언 방법 변경: Vue 3.x에서는 비동기 구성 요소 선언을 표시하는 새로운 보조 함수를 추가합니다.

• 비동기 구성 요소의 고급 선언 메소드의 구성요소 옵션 이름이 loader

• 로 변경되었습니다. 로더에 바인딩된 구성요소 로딩 함수는 더 이상 확인 및 거부 매개변수를 수신하지 않으며 Promise

1-2를 반환해야 합니다. :

이제 Vue 3에서는 기능적 구성 요소가 순수 함수로 정의되므로 비동기 구성 요소 정의를 새로운 정의AsyncComponent 도우미로 래핑하여 명시적으로 정의해야 합니다.

2. Vue 2.x와 Vue 3.x 정의 비교

2-1. 비동기 컴포넌트/라우팅 정의 비교

• 2-1-1. Vue 2.x에서는 비동기 컴포넌트만 선언합니다.

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

• 2-1-2 Vue 3.x에서는 비동기 구성요소 가져오기를 보조 함수인 DefineAsyncComponent를 사용하여 명시적으로 선언해야 합니다. 다음과 같습니다:

<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. 선언 방법 비교

• 2-2-1. Vue 2.x의 비동기 구성 요소 선언에는 보다 발전된 선언 방법이 있습니다. 다음과 같습니다:

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

따라서 다음 비동기 구성 요소 선언:

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

은

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

• 2-2-2와 동일합니다. 비동기 구성 요소는 Vue 3.x에서도 이와 같이 선언될 수 있습니다. 컴포넌트만 로더로 변경하면 됩니다. 다음과 같습니다:

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

2-3. 비동기 구성요소 로딩 함수는 비교를 반환합니다.

• 2-3-1. Vue 2.x에서 확인 및 거부를 수신합니다.

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

• 2-3-2 .Vue 3.x에서는 항상 Promise를 반환합니다.

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

Vue 3.x의 비동기 컴포넌트 로딩 함수는 더 이상 확인 및 거부를 수신하지 않으며 항상 Promise를 반환해야 합니다. 즉, Vue 3.x에서는 비동기 구성 요소를 정의하기 위해 팩토리 함수를 통해 확인 콜백을 수신하는 것이 더 이상 지원되지 않습니다.

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

3. Vue3 practice

팁: Vite 도구를 사용하여 프로젝트를 빌드하는 경우 로컬 개발 중에 라우팅 및 지연 로딩을 위해 가져오기를 사용하세요. 정상적으로 로드할 수 있지만 프로덕션에 패키지하면 경고가 표시됩니다. 환경에서는 오류가 보고되고 페이지가 정상적이지 않습니다. 다음 두 가지 방법을 사용하면 표시가 가능합니다.

3-1. 라우팅 지연 로딩 구현

• 3-1-1.defineAsyncComponent 메서드

// 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 메서드

// 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. 비동기 구성 요소 구현

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

위 내용은 vue3 vite 비동기 구성 요소 및 라우팅의 지연 로딩을 적용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!