Vue のオンデマンド読み込みの具体的な実装

アプリケーションをパッケージ化して構築すると、JavaScript パッケージが非常に大きくなり、ページの読み込みに影響します。異なるルートに対応するコンポーネントを異なるコード ブロックに分割し、ルートにアクセスするときに対応するコンポーネントをロードできれば、より効率的になります。この記事では主に Vue のオンデマンド読み込みの具体的な実装を紹介し、皆様のお役に立てれば幸いです。

シナリオ

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 を使用した遅延読み込みとクロスドメイン実装の手順

JS 非同期読み込みメソッド

Vue を使用してオンデマンドでロードしてユーザーエクスペリエンスを向上

以上がVue のオンデマンド読み込みの具体的な実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。