So implementieren Sie das Laden bei Bedarf in Vue

In diesem Artikel wird hauptsächlich die spezifische Implementierung des Vue-On-Demand-Ladens vorgestellt. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Editor, um einen Blick darauf zu werfen

Konzept (Lazy Loading)

Beim Packen und Erstellen einer Anwendung wird das JavaScript-Paket sehr groß, 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.

Szenario

Als Einzelseitenanwendung übernimmt das xxx-Projekt ein komponentenbasiertes Entwicklungsmodell. Bei jedem Start der Homepage werden alle Komponenten geladen. aber zu diesem Zeitpunkt wird nur die Homepage besucht, was dazu führt, dass eine große Anzahl von Komponenten die Ladesituation verunreinigt.

Zweck

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

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, während „resolve“ für das asynchrone Callback-Rendering der Komponente verantwortlich ist.

babel-polyfill: 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, klicken Sie bitte hier

npm install --save es6-promise-polyfill

Das oben Gesagte habe ich für Sie zusammengestellt. Ich hoffe, es wird Ihnen in Zukunft hilfreich sein.

Verwandte Artikel:

Über Funktionsdrosselung und Funktions-Anti-Shake in JS (ausführliches Tutorial)

So verwenden Sie Vue Seite allgemein Header-Komponentisierung (ausführliches Tutorial)

Was sollten Sie bei der Verwendung von React.setState beachten?

So führen Sie es in vue WeChat SDK ein Schnittstelle

Das obige ist der detaillierte Inhalt vonSo implementieren Sie das Laden bei Bedarf in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!