首页白屏优化

小鹿小陆
527 阅读4分钟

1.路由懒加载

import { createRouter, createWebHistory } from 'vue-router';

const routes = [
    {
        path: '/',
        redirect: '/home',
    },
    {
        path: '/home',
        name: 'home',
        component: () => import('@/views/Tenant/home.vue'),
        meta: {
            title: '租客默认页',
        },
    },
    {
        path: '/home/userOrder',
        name: 'userOrder',
        component: () => import('@/views/Tenant/components/userOrder.vue'),
        meta: {
            title: '租客订单页',
        },
    },
    {
        path: '/home/modifyInfo',
        name: 'modifyInfo',
        component: () => import('../views/Tenant/modifyInfo.vue'),
        meta: {
            title: '修改个人信息界面',
        },
    },
];

const router = createRouter({
    history: createWebHistory(),
    routes,
});

export default router;

或者:

import { defineAsyncComponent } from 'vue'; 
const Home = defineAsyncComponent(() => import('./components/Home.vue')); 
const About = defineAsyncComponent(() => import('./components/About.vue'));
const Contact = defineAsyncComponent(()=>import('./components/Contact.vue'));

import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  },
  {
    path: '/contact',
    name: 'Contact',
    component: Contact
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

2. 组件懒加载

  1. Vue3 提供了 defineAsyncComponent 方法与 Suspense 内置组件，我们可以用它们来做一个优雅的异步组件加载方案。
  2. 异步组件高级声明方法中的 component 选项更名为loader；
  3. loader绑定的组件加载函数不再接收resolve和reject参数，而且必须返回一个Promise；
import { defineAsyncComponent } from 'vue';

const bookNow = defineAsyncComponent(() => import('./components/bookNow.vue')); // 新增同住人

3. 图片懒加载

  • 安装图片懒加载插件
pnpm install vue3-lazyload --S
  • main入口文件注册插件
import { createApp } from 'vue';
import pinia from './stores';
import router from './router/index';
import * as ElementPlusIconsVue from '@element-plus/icons-vue';
import ElementPlus from 'element-plus';
import App from './App.vue';
import zhCn from 'element-plus/dist/locale/zh-cn.mjs';
//引入图片懒加载插件
import Lazyload from 'vue3-lazyload';

const app = createApp(App);

// 将element-plus设置成中文
app.use(ElementPlus, {
    locale: zhCn,
});
//注册图片懒加载插件插件
//注册t图片懒加载插件插件
app.use(Lazyload, {
    loading: 'https://www.rizuwang.cn/rizuwang/images/staticImages/mobilePics/home/loading.gif', //可以指定加载中的图像
    error: 'https://www.rizuwang.cn/rizuwang/images/staticImages/mobilePics/home/loadFail.png', //可以指定加载失败的图像
});

app.use(pinia).use(router).mount('#app');

// 注册所有图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component);
}
  • 在模板中使用v-lazy指令代替src
<template>
  <ul>
    <li v-for="item in imgList" :key="item.id">
      <img v-lazy="item.url" style="width: 100vw; height: 200px" />
    </li>
  </ul>
</template>

<script lang="ts" setup>
import { reactive } from "vue";
const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((i) => {
  return {
    id: `${i}`,
    url: `@/assets/images/${i}.jpg`,
  };
});
const imgList = reactive(data);
</script>

注意：v-lazy指令后面只能跟表达式(绝对或者相对路径会报错)

因为vite或者webpack编译器在打包上线的时候会有Tree Shaking（树摇）会自动的将src中未使用到的图片删除掉，不会打包。而在打包的过程中编译器是不会检测main.js文件中使用的东西，这就导致，如果main.js文件中配置图片懒加载的失败和加载中的图片是相对路径在打包的时候就会导致图片丢失的情况

对于这种情况，解决办法就是在main.js文件中使用互联网绝对路径，将图片放在服务器上，这样就可以实现在打包的时候显示加载中和加载失败的图片.

然而因为图片懒加载的书写位置不一样，我们想要动态的控制lodding加载的动图可以设置下面的样式

screenshots.gif

img[lazy='loading'] {
    display: block;
    width: 100px !important;
    height: 100px !important;
    margin: 0 auto;
}

4. uni-app中提高首页加载速度

在我们的项目架构中，为了确保数据传输的安全性，我们采用了AES与RSA相结合的加密策略。然而，这一过程涉及服务端动态生成密钥，导致小程序首次加载时存在加载时间过长的问题。为了解决这个问题，我们的解决办法是：事先在服务器端预制10万个密钥。这样一来，前端在初次请求时能迅速从预设池中随机抽取一个密钥，从而大大缩短了首页首次加载时间。此外，后端还部署了一个自动监控机制，每日凌晨系统自动检查密钥库存，不足时立即补充。

针对首页房源展示中图片资源的加载效率，我们图片懒加载技术。当图片仅在滑入用户可视范围时才开始加载，从而有效缩减了首页初次加载的负担，避免了无谓的带宽消耗。特别地，小程序首页有一个瀑布流的效果，这个瀑布流是我自己封装的组件，该组件对uni-ui组件库中的swiper进行了二次封装，在img标签配置lazy-load和lazy-load-margin="0"属性，实现了图片的按需加载。为进一步提升用户体验，我们还为每个图片添加了错误监听事件error，一旦发现加载失败，会自动的将加载图片失败的地址更改成我们提供的统一的错误图片。这么做优化了界面的显示，提高了用户体验。

<scroll-view class="list-img" scroll-y>
    <swiper style="height: 493.06rpx" :autoplay="true" circular>
        <swiper-item v-for="(item, index) in roomDetail.picArr" :current="index" :key="item">
            <img
                style="width: 100%; height: 100%; border-radius: 10rpx"
                @error="handleError(index)"
                lazy-load
                :lazy-load-margin="0"
                :src="item"
                mode="scaleToFill" />
        </swiper-item>
    </swiper>
</scroll-view>


// 处理图片加载失败
const handleError = (index) => {
    roomDetail.value.picArr[index] = 'https://www.rizuwang.cn/rizuwang/images/staticImages/mobilePics/home/loadFail.png';
};
avatar
文章
阅读
粉丝