사용자 경험을 개선하기 위해 vue-router를 느리게 로드할 때 로딩 프롬프트를 추가합니다.

이번에는 사용자 경험을 향상시키기 위해 vue-router가 지연 로딩될 때 로딩 프롬프트를 추가하는 방법을 소개하겠습니다. 사용자 경험을 개선하기 위해 vue-router가 지연 로딩될 때 추가해야 할 주의 사항은 무엇입니까? 살펴 보겠습니다.

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

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

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

입니다. 그런데 여기에는 사용자가 "사용자 정보" 메뉴를 클릭할 때부터 js 파일 다운로드 가 완료되어 실행될 때까지의 시간 문제가 있습니다. 이 기간 동안 네트워크에서 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 프로젝트에 Tencent 인증 코드 기능을 도입하는 방법

babel es6 클래스 구문을 변환하는 방법

vue cli를 사용하여 webapck4를 업그레이드하는 방법

위 내용은 사용자 경험을 개선하기 위해 vue-router를 느리게 로드할 때 로딩 프롬프트를 추가합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!