Spezifische Implementierung des Vue-On-Demand-Ladens

Beim Packen und Erstellen einer Anwendung kann das JavaScript-Paket sehr groß werden, was sich auf das Laden der Seite auswirkt. Wenn wir die Komponenten, die verschiedenen Routen entsprechen, in verschiedene Codeblöcke unterteilen und dann die entsprechenden Komponenten laden können, wenn auf die Route zugegriffen wird, ist dies effizienter. In diesem Artikel wird hauptsächlich die spezifische Implementierung des On-Demand-Ladens von Vue vorgestellt, in der Hoffnung, allen zu helfen.

Szenario

Als Einzelseitenanwendung übernimmt das xxx-Projekt jedes Mal, wenn Sie die Homepage starten, ein komponentenbasiertes Entwicklungsmodell. Alle Komponenten werden geladen, aber zu diesem Zeitpunkt hat allein der Besuch der Homepage dazu geführt, dass eine große Anzahl von Komponenten den Ladevorgang verunreinigt hat.

Zweck

Laden Sie beim Zugriff auf die aktuelle Seite nur die entsprechende Komponente, um zu vermeiden, dass alle Seitenkomponenten geladen werden. (Laden bei Bedarf)

Implementierung

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) 
})

Hinweis:

require()-Funktion akzeptiert zwei Parameter. Der erste Parameter ist ein Array, das die abhängigen Module angibt, z. B. ['moduleA', 'moduleB']. Der zweite Parameter ist eine Rückruffunktion, die aufgerufen wird, wenn alle zuvor angegebenen Module erfolgreich geladen wurden. Geladene Module werden als Parameter an diese Funktion übergeben, sodass sie innerhalb der Callback-Funktion verwendet werden können.

Der Beispielcode verwendet eine asynchrone Methode zum Laden von Komponenten. Die Funktion „require“ ist für die asynchrone Einführung der zu rendernden Komponente verantwortlich, und „resolve“ ist für das asynchrone Callback-Rendering der Komponente verantwortlich.

babel-polyfill: Promise transkodieren und kompilieren

npm install --save babel-polyfill

es6-promise-polyfill löst Promise-Kompatibilitätsprobleme. Für Studenten, die nicht viel über Promise wissen, gehen Sie bitte hier

npm install --save es6-promise-polyfill

Verwandte Empfehlungen:

Schritte zum Implementieren von Lazy Loading und domänenübergreifender Implementierung mit Js

JS asynchrone Lademethode

Verwenden Sie Vue zum Laden bei Bedarf, um die Benutzererfahrung zu verbessern

Das obige ist der detaillierte Inhalt vonSpezifische Implementierung des Vue-On-Demand-Ladens. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!