vue-router 지연 로딩 최적화

이번에는 vue-router 지연 로딩을 최적화하기 위한 몇 가지 주의 사항을 알려드리겠습니다. 다음은 실제 사례입니다. 살펴보겠습니다.

vue-router를 사용해본 사람이라면 누구나 모듈 js의 지연 로딩을 구현할 수 있다는 것을 알고 있습니다. 즉, 홈페이지 표시 속도를 높이기 위해 필요할 때만 해당 모듈의 js 스크립트 파일을 로드합니다. 예를 들어, 사용자가 처음으로 "사용자 정보" 버튼이나 메뉴를 클릭할 때만 "사용자 정보" 모듈의 js 구성 요소가 다운로드됩니다.

지연 로딩 구현은 webpack의 AMD 모드 요구 기능에 의존합니다. Webpack은 비동기 require 파일에서 독립적인 js 파일을 생성합니다. 호출 시 js를 비동기적으로 다운로드하고 완료 후 실행합니다. 개발 프로젝트에 구현된 키 코드는

const basicInfo = {
  path: '/user',
  component: resolve => require(['./basicInfo.vue'], resolve) 
}
//然后将这个basicInfo加入路由表中

입니다. 그런데 여기에 문제가 있습니다. 사용자가 "사용자 정보" 메뉴를 클릭하는 시점부터 js 파일 다운로드 및 실행이 완료될 때까지 다운로드 시간 지연으로 인해 발생합니다. 이 기간 동안 네트워크의 Node.js 사용자 인터페이스는 응답이 없어 사용자가 이를 클릭하는 것이 무효하다고 느끼게 만들고 다시 클릭하는 경우가 많습니다. 이는 js 파일이 크고 네트워크 속도가 느린 경우 특히 그렇습니다. 따라서 이 과정에서 Loading 로딩 프롬프트를 추가해야 합니다.

다음 코드 줄을 분석합니다:

resolve => require(['./basicInfo.vue'], resolve)

require 프로세스를 실행한 후 완료 후 해결 콜백 함수를 호출하는 함수입니다. 이를 캡슐화하고 require가 실행되기 전에 Loading을 표시한 다음 로드가 완료되고 콜백이 실행될 때 Loading을 숨기면 이 요구 사항이 달성됩니다. 다음과 같습니다:

const basicInfo = {
  path: '/user',
  component: resolve => {
    [显示Loading]
    require(['./basicInfo.vue'], component => {
      [隐藏Loading]
      resolve(component)
    })
  }
};

로딩 코드 표시 및 숨기기는 사용자의 UI 프레임워크에 따라 처리할 수 있습니다. 예를 들어, element-ui:

import { Loading } from 'element-ui';
var unique;
export default {
  show() {
    let opt = {body: true, text: 'Loading...'};
    if(!unique) unique = Loading.service(opt);
  },
  resolve(resolve) {
    return function (component) {
      if (unique) {
        unique.close();
        unique = null;
      }
      resolve(component)
    }
  }
}
const basicInfo = {
  path: '/user',
  component: resolve => {
    spinRoute.show();
    require(['./basicInfo.vue'], spinRoute.resolve(resolve))
  }
};

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사에 주목하세요!

추천 도서:

vue+todo-list 애플리케이션 게시 방법

mint-ui를 사용하여 휴대폰에서 3단계 연결 만들기

위 내용은 vue-router 지연 로딩 최적화의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!