Vue-Router: 비동기 구성 요소를 사용하여 경로의 지연 로딩을 구현하는 방법은 무엇입니까?-View.js-php.cn

Vue-Router: 비동기 구성 요소를 사용하여 경로의 지연 로딩을 구현하는 방법은 무엇입니까?

PHPz

풀어 주다： 2023-12-18 13:00:46

원래의

1347명이 탐색했습니다.

Vue-Router: 如何使用异步组件来实现路由懒加载？

Vue-Router: 경로의 지연 로딩을 구현하기 위해 비동기 구성 요소를 사용하는 방법은 무엇입니까?

웹 애플리케이션의 복잡성과 요구가 증가함에 따라 웹 페이지 성능 최적화가 점점 더 중요해지고 있습니다. 최적화 방법 중 하나는 경로의 지연 로딩을 구현하는 것입니다. 즉, 모든 페이지의 코드를 브라우저에 한 번에 로드하는 대신 요청 시 페이지 리소스를 로드하는 것입니다. Vue-Router는 비동기 구성 요소를 통해 경로의 지연 로딩을 구현하는 간단하고 강력한 방법을 제공합니다. 이 기사에서는 비동기 구성 요소를 사용하여 Vue-Router 경로의 지연 로딩을 구현하는 방법을 소개하고 특정 코드 예제를 제공합니다.

경로 지연 로딩이란 무엇인가요?

경로 지연 로딩은 사용자가 특정 경로에 액세스할 때만 해당 경로에 필요한 구성 요소와 리소스가 로드된다는 의미입니다. 이것의 장점은 초기 페이지 로딩 시 데이터 양을 줄여 페이지 로딩 속도와 성능을 향상시킬 수 있다는 점이다. Vue에서는 비동기 구성 요소를 사용하여 경로의 지연 로딩을 수행합니다.

비동기 구성 요소를 사용하여 경로의 지연 로딩을 구현하는 방법은 무엇입니까?

Vue-Router는 비동기 구성 요소를 사용하여 경로의 지연 로딩을 구현하는 간단한 방법을 제공합니다. 라우팅 구성의 구성 요소 속성을 Promise를 반환하는 함수로 변경하기만 하면 됩니다. 함수의 반환 값은 로드할 구성 요소가 포함된 모듈입니다. 구체적인 단계와 코드 예는 다음과 같습니다.

비동기 구성 요소 만들기

먼저 비동기 구성 요소를 만들어야 합니다. Webpack의 require.ensure 구문이나 ES6의 import 구문을 사용하여 비동기 구성 요소를 생성할 수 있습니다. 예를 들어 Home이라는 비동기 구성 요소를 만듭니다. require.ensure语法或者ES6的import语法来创建异步组件。例如，我们创建一个名为Home的异步组件：

const Home = () => import('./components/Home.vue');

로그인 후 복사

配置路由

接下来，需要将异步组件配置到路由中。在将组件配置到路由中时，将component属性设置为返回异步组件的函数。以下是一个简单的路由配置示例：

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'home',
    component: () => import('./components/Home.vue'),
  },
  {
    path: '/about',
    name: 'about',
    component: () => import('./components/About.vue'),
  },
  // 其他路由配置...
];

const router = new VueRouter({
  routes,
  mode: 'hash',
});

export default router;

로그인 후 복사

在上述示例中，Home和Aboutrrreee

다음으로 라우팅에 비동기 구성 요소를 구성해야 합니다. 구성 요소를 경로로 구성할 때 comment 특성을 비동기 구성 요소를 반환하는 함수로 설정하세요. 다음은 간단한 경로 구성 예입니다.