Vue에서 주문형 로딩을 구현하는 방법

이 글은 주로 Vue의 온디맨드 로딩의 구체적인 구현을 소개합니다. 편집자는 이것이 꽤 좋다고 생각하므로 지금 공유하고 참고용으로 제공하겠습니다. 편집기를 따라가서 살펴보겠습니다

개념(지연 로딩)

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

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의 기능 조절 및 흔들림 방지 기능에 대하여(자세한 튜토리얼)

vue에서 페이지의 공통 헤더를 구성 요소화하는 방법(자세한 튜토리얼)

React 사용하기 setState

vue

에서 WeChat SDK 인터페이스를 소개하는 방법에 주목하세요

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