defer 优化首页加载时间过长

defer 优化首页加载时间过长

首页home
先混入

  mixins:[defer(21)],

在用v-if 使用defer(0)，传入所需要的最小贞

<template>
  <div>
  <template1 v-if="defer(0)"></template1>
  <template1 v-if="defer(1)"></template1>
  <template1 v-if="defer(2)"></template1>
  <template1 v-if="defer(3)"></template1>
  <template1 v-if="defer(4)"></template1>
  </div>
</template>

<script>
import  template1 from 'template1.vue'
import  defer from './defer.js'
export default {
  mixins:[defer(21)],
  components:{template1}

}
</script>

<style lang="less" scoped></style>

defer.js文件

export default function(maxFraneCount) {
  return {
    data() {
      return {
        frameCount: 0
      }
    },
    mounted() {
      const refreshFrameCount = () => {
        requestAnimationFrame(() => {
          this.frameCount++
          if (this.frameCount < maxFraneCount) {
            refreshFrameCount()
          }
        })
      }
      refreshFrameCount()
    },
    methods: {
      defer(showInFrameCount) {
        return this.frameCount >= showInFrameCount
      }
    }
  }
}