前端性能优化实用方案总结（二）

数据懒加载

场景：当用户向下滚动，将要看到 “笔记本|平板” 时，才加载 “笔记本|平板” 数据，如图：

 实现思路1：利用浏览器原生api  IntersectionObserver

 实现思路2：利用第三方hooks useIntersectionObserver

安装：

npm i --save @vueuse/ core@10.1.0

 在组件中引入：

import { useIntersectionObserver } from '@vueuse/core'

在onMounted生命周期中：

图片懒加载

场景问题：接口一次返回80条数据，有80张图片的线上地址，造成http并发请求数量太多。

 

优化思路： 同样利用useIntersectionObserver 配合自定义指令，为每张图片实现懒加载，当用户滚动将要看到时才加载图片。

 CDN处理打包体积过大问题

1、通过Vue脚手架自带的--report命令，生成html 帮助分析包内容

 

 

2、通过externals配置项，排除体积大的依赖，采用CDN线上引入方式使用

 3、此时打包后，已经没有xlsx、echarts依赖包了

 但是运行项目后会报错

 通过CDN外链的方式引入依赖

 其他优化方案

1、gzip压缩

2、http缓存