Vue3 性能优化

最新推荐文章于 2025-04-21 19:56:31 发布

彼岸-白

最新推荐文章于 2025-04-21 19:56:31 发布

阅读量565

点赞数 4

文章标签：前端 vue.js javascript 性能优化

本文链接：https://blog.youkuaiyun.com/weixin_46382293/article/details/136511775

版权

本文介绍了如何使用谷歌浏览器的DevTools进行性能分析，重点关注FCP、SpeedIndex、LCP、TTI等指标。此外，还讲解了Vite配置优化，包括PWA离线存储技术，以及图片懒加载、虚拟列表和防抖节流的实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

性能优化

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

参数介绍

从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按钮。

Vite 配置优化

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

PWA离线存储技术

npm install vite-plugin-pwa -D

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

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

可以添加到主屏幕，利用manifest实现
可以实现离线缓存，利用service worker实现
可以发送通知，利用service worker实现

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

其他性能优化

图片懒加载

import lazyPlugin from 'vue3-lazy'

<img v-lazy="user.avatar" >

虚拟列表

防抖节流

VueUse 集成了useDebounceFn