vue3+vite项目优化

性能分析

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

LightHouse1

LightHouse2

参数介绍

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

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 vite打包是基于rollup 的我们可以使用 rollup 的插件

1	`npm install rollup-plugin-visualizer`

vite.config.ts 配置记得设置open 不然无效

vite.config.js 同上

import { visualizer } from 'rollup-plugin-visualizer';
plugins: [vue(), visualizer({
    open: true,
  })],

然后进行npm run build打包

visualizer进行打包

根据面板信息进一步优化

例如在项目中使用了 element-plus 发现这个UI库非常庞大这时候就可以使用 element-plus 的按需引入减少包大小

vite配置优化

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

PWA离线存储技术

1 2	`// 1. 通过npm下载 npm install vite-plugin-pwa -D`

// 2. 在vite.config.ts 引入并使用
import { VitePWA } from 'vite-plugin-pwa' 
plugins: [vue(), VitePWA(), visualizer({
      open:true
})],

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

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

// 3. 配置vite.config.ts
VitePWA({
  workbox: {
    cacheId: "DuoDuo",//缓存名称
    runtimeCaching: [
      {
        urlPattern: /.*\.js.*/, //缓存文件
        handler: "StaleWhileRevalidate", //重新验证时失效
        options: {
          cacheName: "DuoDuo-js", //缓存js，名称
          expiration: {
            maxEntries: 30, //缓存文件数量 LRU算法
            maxAgeSeconds: 30 * 24 * 60 * 60 //缓存有效期
          }
        }
      }
    ]
  },
})

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

VitePWA进行打包

图片资源压缩

1	`npm i vite-plugin-imagemin -D`

vite.config.js中引入

1	`import viteImagemin from 'vite-plugin-imagemin'`

viteImagemin({
  gifsicle: {
    optimizationLevel: 7,
    interlaced: false
  },
  optipng: {
    optimizationLevel: 7
  },
  mozjpeg: {
    quality: 20
  },
  pngquant: {
    quality: [0.8, 0.9],
    speed: 4
  },
  svgo: {
    plugins: [
      {
        name: 'removeViewBox'
      },
      {
        name: 'removeEmptyAttrs',
        active: false
      }
    ]
  }
}),