Vue でオンデマンド読み込みを実装する方法

この記事では主にVueのオンデマンドローディングの具体的な実装を紹介していますが、編集者が非常に良いと思ったので、参考として共有させていただきます。エディターをフォローして見てみましょう

コンセプト (遅延読み込み)

アプリケーションをパッケージ化してビルドすると、JavaScript パッケージが非常に大きくなり、ページの読み込みに影響します。異なるルートに対応するコンポーネントを異なるコード ブロックに分割し、ルートにアクセスするときに対応するコンポーネントをロードできれば、より効率的になります。

シナリオ

xxx プロジェクトはシングルページのアプリケーションであり、ホームページが起動されるたびにすべてのコンポーネントが読み込まれます。ただし、この時点ではホームページのみがアクセスされます。これにより、多数のコンポーネントが積載物を汚染します。

目的

すべてのページコンポーネントを読み込まないようにするため、現在のページにアクセスするときに対応するコンポーネントのみを読み込みます。 (オンデマンドでロード)

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() 関数は 2 つのパラメータを受け入れます。最初のパラメータは、['moduleA', 'moduleB'] などの依存モジュールを示す配列です。2 番目のパラメータは、以前に指定したすべてのモジュールが正常にロードされたときに呼び出されるコールバック関数です。ロードされたモジュールはパラメータとしてこの関数に渡され、コールバック関数内で使用できるようになります。

サンプル コードでは、非同期メソッドを使用してコンポーネントを読み込みます。require 関数は、レンダリングされるコンポーネントを非同期的に導入する役割を果たします。一方、resolve は、コンポーネントの非同期コールバック レンダリングを担当します。

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 中国語 Web サイトの他の関連記事を参照してください。