Vue-Router를 사용하여 Vue 애플리케이션에서 경로의 지연 로딩을 구현하는 방법은 무엇입니까?

Vue 애플리케이션에서 Vue-Router를 사용하여 경로 지연 로딩을 구현하면 애플리케이션 성능이 크게 향상될 수 있습니다. 라우팅 지연 로딩을 사용하면 일부 코드와 구성 요소를 필요할 때만 로드할 수 있으므로 애플리케이션 시작 시 모두 로드되지 않으므로 애플리케이션 로딩 시간이 줄어들고 사용자 경험이 향상됩니다.

Vue-Router는 애플리케이션의 라우팅 기능을 구현할 수 있는 Vue.js의 공식 라우팅 관리자입니다. Vue에서 Vue-Router를 사용하여 경로 지연 로딩을 구현하려면 Webpack의 코드 분할 기능을 사용해야 합니다. 이 기사에서는 Vue-Router를 사용하여 Vue 애플리케이션에서 경로 지연 로드를 구현하는 방법을 소개하고 특정 코드 예제를 제공합니다.

1단계: Vue-Router 설치

Vue-Router를 사용하여 경로 지연 로딩을 구현하려면 먼저 Vue-Router를 설치해야 합니다. npm을 사용하여 Vue-Router 설치:

npm install vue-router --save

2단계: Vue 인스턴스 만들기

Vue 인스턴스의 라우터 옵션에서 라우팅 지연 로딩을 사용합니다.

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const Foo = () => import('./Foo.vue')
const Bar = () => import('./Bar.vue')

const router = new Router({
  routes: [
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar }
  ]
})

new Vue({
  router
}).$mount('#app')

위 코드에서는 import() 함수를 사용하여 Foo 및 Bar 구성 요소를 가져오고 const를 사용하여 변수에 할당합니다. 여기서 import() 함수는 Webpack에서 제공하는 동적 가져오기 방식으로, 각 구성요소별로 별도의 블록을 생성할 수 있습니다. Vue 인스턴스의 라우터 옵션에서 가져온 컴포넌트를 직접 사용하면 됩니다.

3단계: 라우팅 지연 로딩 선택적 구성

코드 분할을 위한 기본 Webpack 구성을 사용하는 것 외에도 Vue-Router는 개발자가 코드 분할을 더 자세히 제어하고 지연 로딩의 효율성을 향상시키는 데 도움이 되는 몇 가지 선택적 구성도 제공합니다. .

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')

const router = new Router({
  routes: [
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar }
  ],
  mode: 'history',
  fallback: true,
  scrollBehavior (to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { x: 0, y: 0 }
    }
  },
  base: process.env.BASE_URL,
  linkActiveClass: 'active',
  linkExactActiveClass: 'exact-active',
  beforeEach: (to, from, next) => {},
  afterEach: (to, from) => {}
})

• webpackChunkName: 구성 요소의 이름을 지정하면 Webpack은 이름을 기반으로 각 청크에 대한 청크를 생성합니다. 두 구성요소가 동일한 이름을 사용하는 경우 동일한 블록에 배치하여 지연 로딩 시간을 더욱 줄일 수 있습니다.
• 모드: HTML5 기록 모드를 사용하며 서버 지원이 필요합니다.
• fallback: 브라우저가 HTML5 기록 모드를 지원하지 않는 경우 이 옵션은 해시 모드로 대체할지 여부를 지정합니다.
• scrollBehavior: 페이지로 이동할 때 스크롤 동작에 사용됩니다.
• base: 기본 URL 예를 들어 vue-router를 사용할 때 하위 디렉터리에 애플리케이션을 배포하려는 경우 base 옵션을 사용하여 디렉터리를 지정합니다.
• linkActiveClass: 활성 링크의 CSS 클래스 이름을 지정합니다.
• linkExactActiveClass: 활성화 링크와 정확히 일치하는 CSS 클래스 이름을 지정하세요.
• beforeEach: 라우팅 변경 후크 이전에 등록할 수 있는 전역 라우팅 가드입니다.
• afterEach: 라우팅 변경 후크 이후에 등록할 수 있는 전역 라우팅 가드입니다.

요약

Vue 애플리케이션에서 Vue-Router를 사용하여 경로 지연 로딩을 구현하면 애플리케이션 성능을 크게 향상시킬 수 있습니다. 지연 로딩을 달성하기 위해 Webpack의 코드 분할 기능을 사용할 수 있습니다. Vue-Router의 import() 함수를 사용하여 구성 요소를 가져오고 const를 사용하여 변수에 할당한 다음 라우팅 옵션에서 가져온 구성 요소를 사용합니다. 동시에 Vue-Router는 개발자가 코드 분할을 더 자세히 제어하고 지연 로딩의 효율성을 향상시키는 데 도움이 되는 몇 가지 선택적 구성도 제공합니다.

위 내용은 Vue-Router를 사용하여 Vue 애플리케이션에서 경로의 지연 로딩을 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!