vue 루트 게으름을 실현하는 3가지 방법 예시

앞말
루트 게으름은 페이지에 접근할 때 매우 중요하다. 첫 페이지의 불러오는 속도를 높일 수 있고 불러올 때 흰 페이지가 나타나지 않도록 한다. 만약 게으름이 없으면 웹 팩을 포장한 파일이 매우 크다.

import는 필요에 따라 불러옵니다

vue 비동기식 구성 요소

웹팩이 제공하는 리퀴어.ensure()

1、import 온디맨드 로드 (상용)
다른 구성 요소를 비동기 블록에 묶을 수 있도록 합니다. 같은 웹 packChunkName을 지정해야 합니다.
구성 요소를 그룹별로 나누다

const A = () => import(/* webpackChunkName: "group-A" */ '@/A/A.vue')
const B = () => import(/* webpackChunkName: "group-A" */ '@/A/B.vue')
const C = () => import(/* webpackChunkName: "group-A" */ '@/A/C.vue')

주의: 만약에 babel을 사용한다면syntax-dynamic-import 플러그인을 설치해야 babel이 문법을 정확하게 해석할 수 있습니다.
2, vue 비동기식 구성 요소
vue의 비동기 구성 요소를 사용하여 필요에 따라 불러옵니다. 모든 구성 요소는 js 파일을 생성하여 구성 요소의 게으른 불러오기를 실현합니다.

/* vue  */
{ path: '/A', name: 'A', component: resolve => require(['@/components/A'],resolve) }

3. 웹 팩이 제공하는 리퀴어.ensure()
vue-router 설정 루트, 웹 팩의require를 사용합니다.ensure 기술, 수요에 따라 불러옵니다.
이 경우, 여러 개의 루트가 같은 chunkName을 지정하면 js 파일로 통합됩니다.
문법:require.ensure(dependencies: String[], callback: function([require]), [chunkName: String])
dependencies: 의존하는 모듈 그룹
callback: 리셋 함수, 이 함수가 호출될 때require 매개 변수를 전송합니다
chunkName: 모듈 이름, 구축 시 파일 생성 시 이름 지정 사용

const A= resolve => require.ensure([], () => resolve(require('@/components/A')), 'A');

주의:requi.ensure의 모듈은 다운로드만 되고 실행되지 않습니다. 리셋 함수에require (모듈 이름) 를 사용해야만 이 모듈이 실행됩니다.
총결산
이 vue 구현 루트 게으름에 대한 3가지 방법의 예시를 소개합니다. 더 많은 vue 루트 게으름에 대한 내용은 이전의 글을 검색하거나 아래의 관련 글을 계속 훑어보십시오. 앞으로 많은 응원 부탁드립니다!