vue+webpack2를 사용하여 경로 지연 로딩을 구현하는 방법 소개

다음 Vue.js 튜토리얼 칼럼에서는 vue+webpack2를 사용하여 라우팅을 지연 로딩하는 방법을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

애플리케이션을 패키징하고 빌드할 때 Javascript 패키지가 매우 커져서 페이지 로딩에 영향을 미칩니다. 서로 다른 경로에 해당하는 구성 요소를 서로 다른 코드 블록으로 분할한 다음 경로에 액세스할 때 해당 구성 요소를 로드할 수 있다면 더 효율적일 것입니다.

Vue의 비동기 구성요소와 Webpack의 코드 분할 기능을 결합하여 라우팅 구성요소의 지연 로딩을 쉽게 구현합니다.

첫 번째, 비동기 구성 요소는 Promise를 반환하는 팩토리 함수로 정의할 수 있습니다(이 함수에서 반환된 Promise는 구성 요소 자체를 해결해야 함).

const Foo = () => Promise.resolve({ /* 组件定义对象 */ })

두 번째, Webpack 2에서는 동적 가져오기 구문을 사용하여 코드를 정의할 수 있습니다. 청킹 분할 지점:

import('./Foo.vue') // 返回 Promise

두 가지를 결합하여 Webpack에서 자동으로 코드 분할할 수 있는 비동기 구성 요소를 정의하는 방법입니다.

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

라우팅 구성에서는 아무것도 변경할 필요가 없습니다. 평소대로 사용하세요. Foo:

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

관련 권장 사항:

2020 프론트 엔드 Vue 인터뷰 질문 요약(답변 포함)

vue 튜토리얼 권장 : 2020년 최신 vue.js 비디오 튜토리얼 5개 선택

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 소개를 방문하세요! !

위 내용은 vue+webpack2를 사용하여 경로 지연 로딩을 구현하는 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!