首页组件懒加载，提高首页载入效率

前言

小凌在前段时间做了一个自定义首页的功能。需求是在根据后台的配置的数据去加载相关的组件，用户可以自定义展示需要展示几个组件。刚开始组件少并没有影响载入效率，可当配置10个以上组件时候，页面载入就有点卡顿。突然想起了之前做的图库查看懒加载的功能可以用上，便将其运用在组件载入上。

原理

原理如下，设定对屏幕滚动的监听。若屏幕将要滚动到底部，则向下加载内容。

基本构成

文件结构如下

我们先实现一个简单的构造，由后端请求数据动态构成用户首页。

核心代码如下：

index.vue html部分

<div class="index-content" id="index-content" ref="content">
      <!-- 遍历组件 -->
      <component
        :is="item.name"
        v-for="item in componentList"
        :key="item.id"
        :content="item.content"
        :skHight="item.skHight"
      ></component>
 </div>

index.vue js部分

// data
// 此处是后端请求过来的组件配置数据
componentList: [
        {
          id: 4,
          name: "banner", // 所选用的组件
          content: { title: "banner图" }, // 传递给组件的参数
          skHight: "180px" // 骨架屏高度
        },
        {
          id: 3,
          name: "menus",
          content: { title: "金刚区" },
          skHight: "180px"
        },
        // ... 剩余组件
]

common.js 用于配置组件引用地址

export default {
  pics: () => import('@/views/indexLive/components/pics/Pics'),
  menus: () => import('@/views/indexLive/components/menus/Menus'),
  goods: () => import('@/views/indexLive/components/goods/Goods'),
  banner: () => import('@/views/indexLive/components/banner/Banner'),
}

index.vue 引入部分

import common from "./common.js";
components: { ...common },

我们在每个组件中设置一个方法来模拟后台数据，请求的时间是1秒。并且在载入组件时执行。

各组件.vue js部分

// methods
getData() {
      this.times = setTimeout(() => {
        this.dataList = [
          {
            name: "后端请求的数据"
          }
        ];
        console.log(`${this.content.title}数据加载完成`);
      }, 1000);
    }
 // mounted
mounted() {
    this.getData();
},

执行完以上代码我们发现，组件载入时把不在本屏幕内的数据也请求了。

实现按需加载

我们先设定一个叫showComponentList用于显示组件。当屏幕滚动到底部时，componentList全部组件里的代码会一个一个push到显示组件列表中，实现按需加载。

具体代码如下： index.vue js

// mounted
mounted() {
    this.initData();
    window.addEventListener("scroll", this.handleScroll, true);
},
// before
destroyed() {
    window.removeEventListener("scroll", this.handleScroll);
}

// methods
// 初始化组件 和 改变showComponentList
initData() {
      this.showComponentList = this.componentList.slice(0, this.initNum);
    },
// 滚动监听，当到底部接近 100px时，加载后面的组件
handleScroll(e) {
    let dom = document.getElementById("scroll-box");
    let scrollTop = dom.scrollTop || document.body.scrollTop;
    let clientHeight = dom.clientHeight;
    let scrollHeight = dom.scrollHeight;
    let bottomOfWindow = scrollTop + clientHeight >= scrollHeight - 100;
        if (bottomOfWindow) {
            if (this.initNum <= this.componentList.length + 1) {
              this.initNum = this.initNum + 1;
              this.initData();
            }
        }
}

index.vue html

<!-- 遍历组件  componentList =》 showComponentList -->
  <component
    :is="item.name"
    v-for="item in showComponentList"
    :key="item.id"
    :content="item.content"
    :skHight="item.skHight"
  ></component>

实现效果如下：

至此我们的组件按需加载就完成了。

项目地址

项目地址：github.com/FireSmallPa…