import Vue from 'vue';
class whiteScreen {
    constructor() {
        const timing = window.performance.timing;
        // 記錄開始時間
        this.startTime = timing.navigationStart || timing.connectStart || 
        dayjs().format('YYYY-MM-DD HH:mm:ss:SSS');
        // 加載中狀態(tài) 
        this.loading = false;
        // 收集每個組件加載的完成數(shù)據(jù)
        this.times = [];
        // 記錄組件是否加載過，因為一個頁面會多次用到某組件，只記錄第一次加載成功即可
        this.isLoadedComp = {};
        // 是否在加載中
        this.setLoading(true);
        // 利用vue的mixin記錄每個組件掛載完成的時間
        const _this = this;
        Vue.mixin({
            /** 
            * 注意這里要用到mounted而不是created，因為我們要記錄白屏的時間
            * 所以是用戶看到界面的時刻，用mounted比created更加適合，具體看 vue 組件的生命周期 
            * 另外vue在組件和子組件加載機(jī)制。created和mounted執(zhí)行時機(jī)也存在區(qū)別 
            */
            mounted() {
            // 如果不是正在加載中，則返回
            if (!_this.isLoading()) return;
            // 獲取組件標(biāo)簽
            const name = this.$options.name || this.$options._componentTag;
            // 如果該組件已經(jīng)加載過，則不用再記錄
            if (_this.isCompLoaded(name)) return;
            this.$nextTick(() => {
                if (name) {
                    _this.push({
                    name: name,
                    // 記錄當(dāng)前組件加載成功的時間
                    time: dayjs().format('YYYY-MM-DD HH:mm:ss'),
             });
            }
           });
          }
      });
    }
    isLoading() {
        return this.loading;
    }
    setLoading(value) {
      this.loading = value;
      if (!this.isLoading()) {
        const data = [...this.times];
        const startTime = this.startTime;
        // TODO: 上傳埋點
        console.log({
          data,
          startTime,
        });
      }
    }
    isCompLoaded(name) {
      if (!this.isLoadedComp[name]) {
        this.isLoadedComp[name] = true;
        return false;
      }
      return this.isLoadedComp[name];
    }
}

import Vue from 'vue';
class whiteScreen {
    constructor({ safeTime = 3000 } = {}) {
        // 設(shè)置組件最大加載時間
        this.safeTime = safeTime;
        // 其他...
        Vue.mixin({
            /** 
            * 注意這里要用到mounted而不是created，因為我們要記錄白屏的時間
            * 所以是用戶看到界面的時刻，用mounted比created更加適合，具體看 vue 組件的生命周期 
            * 另外vue在組件和子組件加載機(jī)制。created和mounted執(zhí)行時機(jī)也存在區(qū)別 
            */
            mounted() {
            // 如果不是正在加載中，則返回
            if (!_this.isLoading()) return;
            // 獲取組件標(biāo)簽
            const name = this.$options.name || this.$options._componentTag;
            // 如果該組件已經(jīng)加載過，則不用再記錄
            if (_this.isCompLoaded(name)) return;
            this.$nextTick(() => {
                if (name) {
                    _this.push({
                    name: name,
                    // 記錄當(dāng)前組件加載成功的時間
                    time: dayjs().format('YYYY-MM-DD HH:mm:ss'),
             });
            }
           });
          }
      });
    }
    isLoading() {
        return this.loading;
    }
    setLoading(value) {
      this.loading = value;
      if (!this.isLoading()) {
        const data = [...this.times];
        const startTime = this.startTime;
        // TODO: 上傳埋點
        console.log({
          data,
          startTime,
        });
      }
    }
    createCountDown() {
      window.clearTimeout(this.countTime);
      this.countTime = window.setTimeout(() => {
        this.setLoading(false);
      }, this.safeTime);
    }
    isCompLoaded(name) {
      if (!this.isLoadedComp[name]) {
        this.isLoadedComp[name] = true;
        return false;
      }
      return this.isLoadedComp[name];
    }
    push(item) {
      // 重新創(chuàng)建定時器
      this.createCountDown();
      this.times.push(item);
    }
}

<div>
    <span v-if="isOpen">我是骨架屏</span>
    <span v-else> 
    // 這里可以寫成空樣式的組件 
    <skeleton-loaded></skeleton-loaded>
    <slot></slot>
    </span>
</div> 
// skeleton-loaded 
<span></span>

// 這個就是骨架屏組件加載結(jié)束的時間
const skeletonLoadedTime = this.times.find(item => item.name === 'skeleton-loaded').time 

// 這個就是 el-table 組件加載結(jié)束的時間
const elTableLoadedTime = this.times.find(item => item.name === 'el-table').time