vue-routerの遅延読み込みの詳しい説明（コード付き）

今回は vue-router 遅延ロードについて詳しく説明します (コード付き)。vue-router 遅延ロードを使用する際の 注意事項 は何ですか? ここで実際のケースを見てみましょう。

vue-router を使用したことのある人なら誰でも、vue-router がモジュール js の遅延読み込みを実装できることを知っています。つまり、ホームページの表示を高速化するために、必要なときに対応するモジュールの js スクリプト ファイルのみを読み込みます。たとえば、ユーザーが初めて特定の「ユーザー情報」ボタンまたはメニューをクリックしたときのみ、ダウンロードが行われます

今回は、次のような実際的なケースを紹介します。一見。

「ユーザー情報」モジュールのjsコンポーネントを読み込みます。

遅延読み込みの実装は、webpack の AMD モードの関数

requirefunction に依存します。 Webpack は、非同期の require ファイルから独立した js ファイルを生成します。呼び出し時には、js が非同期的にダウンロードされ、完了後に実行されます。開発プロジェクトに実装された主要なコードは次のとおりです:

const basicInfo = {
  path: '/user',
  component: resolve => require(['./basicInfo.vue'], resolve) 
}
//然后将这个basicInfo加入路由表中

しかし、ここで問題があります: ユーザーが「ユーザー情報」メニューをクリックしてから、js

ファイルのダウンロード が完了して実行されるまで、時間がかかるためです。この期間中、ネットワークから js をダウンロードする際の遅延 ユーザー インターフェイスが応答しないため、ユーザーはクリックしても効果がないと感じ、頻繁に再度クリックしてしまいます。これは、js ファイルが大きく、ネットワーク速度が遅い場合に特に当てはまります。したがって、このプロセスに Loading 読み込みプロンプトを追加する必要があります。

次のコード行を分析します:

resolve => require(['./basicInfo.vue'], resolve)

これはrequire処理を実行し、完了後にresolve

コールバック関数を呼び出す関数です。これをカプセル化し、require が実行される前に Loading を表示し、コールバックが完了して実行されたときに Loading を非表示にするだけで、この要件は達成されます。次のように:

const basicInfo = {
  path: '/user',
  component: resolve => {
    [显示Loading]
    require(['./basicInfo.vue'], component => {
      [隐藏Loading]
      resolve(component)
    })
  }
};

読み込みコードの表示と非表示は、独自の UI フレームワークに従って処理できます。たとえば、element-ui:

import { Loading } from 'element-ui';
var unique;
export default {
  show() {
    let opt = {body: true, text: 'Loading...'};
    if(!unique) unique = Loading.service(opt);
  },
  resolve(resolve) {
    return function (component) {
      if (unique) {
        unique.close();
        unique = null;
      }
      resolve(component)
    }
  }
}
const basicInfo = {
  path: '/user',
  component: resolve => {
    spinRoute.show();
    require(['./basicInfo.vue'], spinRoute.resolve(resolve))
  }
};

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

vue cli webapck4

vue-cli 3.0をアップグレードする方法 初心者が知っておくべきこと

D3.jsを使用して動的なダイヤル効果を実現する

以上がvue-routerの遅延読み込みの詳しい説明（コード付き）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。