遅延読み込み中に読み込みを追加する

今回は、遅延ロード中にロードを追加する場合の注意事項をいくつか紹介します。

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 サイトの他の関連記事に注目してください。

推奨読書:

JS実装はインターフェースプロンプトボックスに留まる

vue cliアップグレードwebpack 4ステップの詳細な説明

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