vue-router の遅延読み込みを最適化する

今回は、vue-router の遅延読み込みを最適化するための注意事項をいくつか紹介します。以下は実際のケースです。見てみましょう。

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

遅延読み込みの実装は、Webpack の下の AMD モードの require 関数の機能に依存します。 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+todo-listアプリの公開方法

mint-uiを使って携帯電話で3層連携を作る

以上がvue-router の遅延読み込みを最適化するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。