11-22 10:13 阅读 174

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

前言

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

原理

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

基本构成

QQ浏览器截图20211121165446.png

文件结构如下

QQ浏览器截图20211121170451.png

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

核心代码如下：

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(); }, 复制代码

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

QQ浏览器截图20211121172825.png

实现按需加载

我们先设定一个叫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> 复制代码

实现效果如下：

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

作者：有趣的老凌
链接：https://juejin.cn/post/7032959703412178975