vue遅延ロードコンポーネントの開発

vueの単一ページアプリケーションのアクセス速度は一般的には速いが、複雑なページが初めて開くときに遅く、遅い理由は主に以下の2つに関連している.
1、dom要素が多く、最初に開くときに多くのレンダリングと判断が必要ですが、これらのレンダリングと判断の多くはページを初めて開くときに消費されるものではありません.
2、最初に表示されないdom要素の多く、またはサブコンポーネントのロード時にajaxリクエストを呼び出してデータのロードを要求する場合、最初にロードされたリクエストは5つ、10つ以上ある可能性があります.この場合、コンカレントリクエストは競争をもたらします.最初のロードは現実的には1-2つしか必要ありません.時間は30 msかかりますが、5-10個のリクエストがコンカレントになると、そうすると全体要求時間が150 ms以上になるので,このときの体験効果は非常に悪い.
以上の2つの原因に基づいて、私たちは遅延ロードのメカニズムを導入する必要があります.現在、ネット上にはいくつかの遅延ロードのコンポーネントが存在していますが、機能と私たちのニーズは少し異なり、柔軟ではありません.だから、最善の方法は自分でコンポーネントをパッケージすることです.vueのapiにはよく書かれています.以下の2つの点に基づいて、遅延ロードのメカニズムが実行可能であることを証明します.
1、v-ifのデフォルトがfalseの場合はコンポーネントはロードされず、trueになった場合にのみロードされます.また、私たちのコンポーネントはロード後に破棄する必要はありません(https://cn.vuejs.org/v2/guide/conditional.html#v-if)
2.サブアセンブリは、親アセンブリがサブアセンブリのラップを参照する内容をスロットで配布できます.(https://cn.vuejs.org/v2/guide/components.html)
以上の2点から,遅延ロードコンポーネント(コードvue-cliベースのプロジェクト)を開発し,サブコンポーネントの内容は以下のようにpl-lazyと命名した.

  export default {
    name: "pl-lazy",
    props: {
      time: {
        required: false,
        default: 0
      }
    },
    data() {
      return {
        initSuccess: false
      }
    },
    created() {
      this.initSlot();
    },

    methods: {
      initSlot() {
        let vm = this;
        setTimeout(function () {
          vm.initSuccess = true;
        }, (Number(vm.time || 0)));
      }
    }
  }

説明:サブコンポーネントには、設定可能な遅延ロード時間としてパラメータtimeが含まれています.デフォルトは0 msで、必須ではありません.
親コンポーネント呼び出し:
1、scriptにコンポーネントを導入する(開発ツールがideaを使用している場合は、

import PlLazy from "./plLazy";

export default {
  components: {
    PlLazy
  }, 
  name: "test-lazy"
}

2、遅延ロードが必要なコンポーネントの上にコンポーネントをネストすればよい:

            /dom  

もし使用する地方が比較的に多いならば、それではすべてのページはすべてこのように導入するのが少し煩雑で、私达は公共の導入コンポーネントが必要で、このように私达は更に便利に使用することができて、この効果を達成するにはmainだけが必要です.jsにコンポーネントを導入すればよい:

//       
import plLazy from "./components/common/components/plLazy";
Vue.component('pl-lazy', plLazy);

ここに来て、大功を成し遂げました!