2024-04-03
温故知新
00
请注意,本文编写于 250 天前,最后修改于 250 天前,其中某些信息可能已经过时。

目录

简介
性能优化
LightHouse页面分析
参数介绍
rollup代码分析
Vite 配置优化
PWA离线存储技术
其他性能优化
图片懒加载
虚拟列表
多线程
防抖节流
赞助请求V3

简介

本文主要介绍了一些性能分析工具,和一些 Vue 项目的优化方式。

Chrome 浏览器自带的LightHouse 分析工具、rollup 分析工具等等。

性能优化

LightHouse页面分析

我们可以使用谷歌浏览器自带的 DevTools 中的 LightHouse 进行性能分析:

开始分析: 1

分析结果: 2

参数介绍

Performance 页的表现结果来看,得分 37,并提供了很多的时间信息,我们来解释下这些选项代表的意思:

  • FCP (First Contentful Paint):首次内容绘制的时间,浏览器第一次绘制DOM相关的内容,也是用户第一次看到页面内容的时间。
  • Speed Index: 页面各个可见部分的显示平均时间,当我们的页面上存在轮播图或者需要从后端获取内容加载时,这个数据会被影响到。
  • LCP (Largest Contentful Paint):最大内容绘制时间,页面最大的元素绘制完成的时间。
  • TTI(Time to Interactive):从页面开始渲染到用户可以与页面进行交互的时间,内容必须渲染完毕,交互元素绑定的事件已经注册完成。
  • TBT(Total Blocking Time):记录了首次内容绘制到用户可交互之间的时间,这段时间内,主进程被阻塞,会阻碍用户的交互,页面点击无反应。
  • CLS(Cumulative Layout Shift):计算布局偏移值得分,会比较两次渲染帧的内容偏移情况,可能导致用户想点击A按钮,但下一帧中,A按钮被挤到旁边,导致用户实际点击了B按钮。

通过以上测试指标,可以进行针对性优化。

rollup代码分析

由于我们使用的是 vitevite 打包是基于 rollup 的,我们可以使用 rollup 的插件:

bash
# 安装插件 npm install rollup-plugin-visualizer
ts
// `vite.config.ts`配置插件,记得设置open 不然无效 import { visualizer } from 'rollup-plugin-visualizer'; plugins: [vue(), vueJsx(),visualizer({ open:true })],

然后进行 npm run build 打包,打包后会弹出分析页面,如:

3

我在项目中使用了 Ant Design,分析发现这个 UI 库非常庞大,这时候就可以使用 Ant Design 的按需引入来减少包大小

Vite 配置优化

ts
build:{ chunkSizeWarningLimit:2000, cssCodeSplit:true, //css 拆分 sourcemap:false, //不生成sourcemap minify:false, //是否禁用最小化混淆,esbuild打包速度最快,terser打包体积最小。 assetsInlineLimit:5000 //小于该值 图片将打包成Base64 },

PWA离线存储技术

bash
npm install vite-plugin-pwa -D
ts
import { VitePWA } from 'vite-plugin-pwa' plugins: [vue(),VitePWA(), vueJsx(),visualizer({ open:true })],

PWA 技术的出现就是让 web 网页无限接近于 Native 应用:

  1. 可以添加到主屏幕,利用manifest实现
  2. 可以实现离线缓存,利用service worker实现
  3. 可以发送通知,利用service worker实现
ts
VitePWA({ workbox:{ cacheId:"XIaoman",//缓存名称 runtimeCaching:[ { urlPattern:/.*\.js.*/, //缓存文件 handler:"StaleWhileRevalidate", //重新验证时失效 options:{ cacheName:"XiaoMan-js", //缓存js,名称 expiration:{ maxEntries:30, //缓存文件数量 LRU算法 maxAgeSeconds:30 * 24 * 60 * 60 //缓存有效期 } } } ] }, })

进行 npm run build 打包会生成 sw.js

4 5

其他性能优化

图片懒加载

bash
# 引入vue3懒加载模块 import lazyPlugin from 'vue3-lazy' # 页面中使用懒加载 <img v-lazy="user.avatar" >

虚拟列表

Element-Plus中的组件: 6

多线程

使用 new Worker 创建多线程,优化速度。

worker 脚本与主进程的脚本必须遵守同源限制。他们所在的路径协议、域名、端口号三者需要相同

ts
const myWorker1 = new Worker("./calcBox.js");

都使用 postMessage 发送消息

ts
worker.postMessage(arrayBuffer, [arrayBuffer]);

都使用 onmessage 接收消息

ts
self.onmessage = function (e) { // xxx这里是worker脚本的内容 };

关闭

ts
worker.terminate();
  • VueUse 库已经集成了 webWorker7

防抖节流

  • 同样 VueUse 也是集成了: 8

赞助请求V3

建站因为热爱,生活需要Money,请屏幕前的大佬动动您发财的小手,点击一次以示鼓励,祝您生活愉快!

PS:就目前的访问量,即便每个访客都点一次广告,收入也不足以支付运营成本。如果看不到广告,可能是网络原因或被拦截了,那就算了吧。再次祝您生活愉快~~

如果对你有用的话,可以打赏哦
打赏
ali pay
wechat pay

本文作者:DingDangDog

本文链接:

版权声明:本文 CSDN 小满ZS 原创,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 原文链接:https://blog.csdn.net/qq1195566313/article/details/126811832