Lighthouse性能优化，看这篇就够了

1、Perfomance

可能会报如下错误，未启用gzip文本压缩，

Serve images that are appropriately-sized to save cellular data and improve load time.

提供适当大小的图像，以保存蜂窝数据并缩短加载时间。

解决：这个问题是因为图片的尺寸和屏幕显示的尺寸不一致导致，比如数据图片是很大的一张图片，但在网页显示却占很小的像素。要用到img的srcset属性显示不同尺寸的图片。但是我们首页都是用的上传的图片，不知道图片的尺寸。所以只能压缩上传的图片，以提高分数。可以使用rue-image-compressor插件，也可以看看我之前写的压缩图片的方法

Text-based resources should be served with compression (gzip, deflate or brotli) to minimize total network bytes.

基于文本的资源应该使用压缩（gzip、deflate或brotli），以最大限度地减少网络总字节数。

解决：npm i vite-plugin-compression -D

在vite.config.ts文件中配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import viteCompression from 'vite-plugin-compression'
 
 export default defineConfig({
  plugins: [
    vue(),
    viteCompression({
      verbose: true, // 默认即可
      disable: false, //开启压缩(不禁用)，默认即可
      deleteOriginFile: false, //删除源文件      
      algorithm: 'gzip', //压缩算法
      ext: '.gz', //文件类型  
      threshold: 1024 // 对大于 1kb 的文件进行压缩
    })],
})

Reduce unused JavaScript and defer loading scripts until they are required to decrease bytes consumed by network activity.

减少未使用的JavaScript，并推迟加载脚本，直到需要它们来减少网络活动所消耗的字节数。

减 JavaScript 文件的大小

npm i  terser

在vite.config.ts文件中配置

build: {
  minify: "terser",
  terserOptions: {
    compress: {
      drop_console: true,
      drop_debugger: true,
    },
  }
},

2、Accessibility

Elements with an ARIA [role] that require children to contain a specific [role] are missing some or all of those required children.

具有ARIA[角色]且要求子项包含特定[角色]的元素缺少部分或全部所需子项。

比如：el-menu的子项必须是el-menu-item

When an element doesn't have an accessible name, screen readers announce it with a generic name, making it unusable for users who rely on screen readers

当一个元素没有可访问的名称时，屏幕阅读器会用通用名称宣布它，这使得依赖屏幕阅读器的用户无法使用它

解决：加一个aria-label属性

When a button doesn't have an accessible name, screen readers announce it as "button", making it unusable for users who rely on screen readers.

当按钮没有可访问的名称时，屏幕阅读器会将其宣布为“按钮”，这使得依赖屏幕阅读器的用户无法使用该按钮。

解决：加一个aria-label属性，elementui的走马灯的分页下标按钮是个空按钮

nextTick(()=>{
  const list = document.getElementsByClassName('el-carousel__button')
  for(let i=0;i<list.length;i++){
    list[i].setAttribute('aria-label','Button')
  }
})

Informative elements should aim for short, descriptive alternate text. Decorative elements can be ignored with an empty alt attribute.

信息元素应针对简短的描述性替代文本。装饰元素可以使用空的alt属性忽略。

解决：img加alt=''

Link text (and alternate text for images, when used as links) that is discernible, unique, and focusable improves the navigation experience for screen reader users.

可辨别、独特和可聚焦的链接文本（以及用作链接时的图像替代文本）改善了屏幕阅读器用户的导航体验。

解决a链接加aria-label属性

4、SEO

Meta descriptions may be included in search results to concisely summarize page content.

元描述可以包括在搜索结果中以简明地总结页面内容。

解决：<meta name="description" content="描述">

还有些问题比如显示的图片要清晰，图片fit='cover'等，Lighthouse里面都要不合格的原因，和怎么解决，可以点链接进去看看，不过有的需要访问外网才能进。