Vue 주문형 로딩의 특정 구현

애플리케이션을 패키징하고 구축할 때 JavaScript 패키지가 매우 커져서 페이지 로딩에 영향을 미칩니다. 서로 다른 경로에 해당하는 구성 요소를 서로 다른 코드 블록으로 나눈 다음 해당 경로에 액세스할 때 해당 구성 요소를 로드할 수 있다면 이것이 더 효율적일 것입니다. 이 기사에서는 모든 사람에게 도움이 되기를 바라며 Vue의 주문형 로딩의 구체적인 구현을 주로 소개합니다.

Scenario

xxx 프로젝트는 단일 페이지 애플리케이션으로, 홈페이지가 시작될 때마다 모든 구성 요소가 로드됩니다. 그러나 현재는 홈페이지만 방문합니다. , 이는 많은 부품 오염 부하를 유발합니다.

Purpose

모든 페이지 구성 요소를 로드하지 않으려면 현재 페이지에 액세스할 때 해당 구성 요소만 로드하세요. (요청 시 로드)

implementation

app.vue

<template>
  <p id="app">
    <router-view/>
  </p>
</template>

router.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import 'babel-polyfill'
import {Promise} from 'es6-promise-polyfill'
import App from '../components/app'

// 定义路由，每个路由映射一个组件。
const Routers = [
  {
    path: '/',  // 路径
    component: resolve => require(['../components/member/index], resolve)  // 异步加载组件
  },
  {
    path: '/login',
    component: resolve => require(['../components/member/login'], resolve)
  }
]

const RouterConfig = {
  routes: Routers
}
// 创建router实例，并传递路由配置。
const router = new VueRouter(RouterConfig);
// 创建并挂载根实例。
new Vue({
  el:'#app',
  router,
  // 将h作为createElement的别名是一个通用惯例。
  render: h =>(App) 
})

참고:

require() 함수는 두 개의 매개 변수를 허용합니다. 첫 번째 매개변수는 ['moduleA', 'moduleB']와 같은 종속 모듈을 나타내는 배열입니다. 두 번째 매개변수는 이전에 지정한 모든 모듈이 성공적으로 로드되면 호출되는 콜백 함수입니다. 로드된 모듈은 이 함수에 매개변수로 전달되므로 콜백 함수 내에서 사용할 수 있습니다.

샘플 코드는 비동기식 메서드를 사용하여 구성 요소를 로드합니다. require 함수는 렌더링할 구성 요소를 비동기적으로 도입하는 역할을 담당하고, 해결은 구성 요소의 비동기 콜백 렌더링을 담당합니다.

babel-polyfill: Promise 트랜스코딩 및 컴파일

npm install --save babel-polyfill

es6-promise-polyfill은 Promise 호환성 문제를 해결합니다. Promise에 대해 잘 모르는 학생들은 여기로 이동하세요

npm install --save es6-promise-polyfill

관련 권장 사항:

Js를 사용하여 지연 로딩 및 도메인 간 구현을 구현하는 단계

JS 비동기 로딩 방법

Vue를 사용하여 사용자 경험을 개선하기 위해 주문형 로드

위 내용은 Vue 주문형 로딩의 특정 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!