性能优化

我们可以直接按F12使用浏览器自带的Lighthouse对我们的网站进行性能分析。

Performance：表现分（网站的总体分数）
accessibility：易用性
Best Practices：最佳实践
SEO(search engine optimization): 搜索引擎（搜索排名）得分
First Contentful Paint：简称FCP，首次绘制内容的时间，浏览器第一次绘制DOM相关的内容，也是用户第一次看到页面内容的时间。
Speed Index：页面各个可见部分的显示平均时间，当我们页面上存在轮播图或者需要从后端获取内容加载时，这个数据会被影响。
Largest Contentful Paint：简称LCP，页面最大内容（DOM）绘制完成的时间。
Time To Interactive：简称TTL，从页面渲染到用户可以与页面进行交互的一个时间，内容必须渲染完毕，交互元素绑定的事件已经注册完成。
Total Blocking Time：记录了首次内容绘制到用户可交互之间的时间，这段时间内，主进程被阻塞，会阻碍用户的交互，页面点击无反应。
Cumulative Layout Shift：简称CLS，计算布局偏移值得分，会比较两次渲染帧的内容偏移情况，可能导致用户想点击A按钮，但下一帧中，A按钮被挤到旁边，导致用户实际点击了B按钮。

分析打包之后的代码的体积

vite打包是基于Rollup的，所以我们可以使用Rollup的插件，进行对打包后的代码体积的分析

安装插件
```
npm install rollup-plugin-visualizer
```

引入插件

vite.config.ts：

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import { visualizer } from 'rollup-plugin-visualizer'

export default ({ mode }) => {
  console.log(loadEnv(mode, process.cwd()));
  return defineConfig({
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src')
      }
    },
    plugins: [
      vue(),
      visualizer({ open: true })
    ],
  })
}

打包优化

在vite.config.ts中，添加build字段：

    import { defineConfig, loadEnv } from 'vite'
    import vue from '@vitejs/plugin-vue'
    import { visualizer } from 'rollup-plugin-visualizer'
    
    export default ({ mode }) => {
      console.log(loadEnv(mode, process.cwd()));
      return defineConfig({
        resolve: {
          alias: {
            '@': path.resolve(__dirname, 'src')
          }
        },
        plugins: [
          vue(),
          visualizer({ open: true })
        ],
        build: {
            chunkSizeWarningLimit: 2000, // 块大小警告限制，打包时，包大小超过2000kb的时候会有警告提示。
            cssCodeSplit: true, // 拆分css代码
            sourcemap: false, // 生产环境不生成sourcemap
            minify: 'esbuild|terser|false', // 是否禁用最小化混淆
            assetsInlineLimit: 4096 // 小于4k的引用资源将被内联成base64
        }
      })
    }
    ```

vite提供的性能优化

chunkSizeWarningLimit：块大小警告限制，打包时，包大小超过多少kb的时候警告提示。
cssCodeSplit：是否拆分css代码。
sourcemap：用于将压缩或转换后的代码映射回其原始源代码，以便于调试和查看，生产环境是否生成sourcemap。
minify：最小化混淆，esbuild打包速度最快，terset打包体积最小，或者禁用false。
assetsInlineLimit：指定小于多少kb的到导入/引用资源将内联为 base64 编码，默认4096（4k），小于指定的体积会被编译成base64，就不用打包到文件里边了，加载的时候就是用base64。

vite提供的插件做性能优化

vite-plugin-pwa

网页离线缓存

PWA技术的出现就是让web网页无限接近于Native原生应用。
1. 可以将网页添加到主屏幕（移动端），利用manifest实现。
2. 可以实现离线缓存，利用service worker实现。
3. 可以发送通知，利用service worker实现。
安装：
```
npm install vite-plugin-pwa
```

图片懒加载

安装：

npm install vue3-lazy

配置main.ts：

  import lazyPlugin from 'vue3-lazy'
  app.use(lazyPlugin, {
      loading: './assets/images/200.png', // 图片加载时默认图片
      error: './assets/images/200.png'// 图片加载失败时默认图片
  })

使用：

<img v-lazy="url" />

虚拟列表

加入后端一下子返回几十万或更多条数据的时候可以使用虚拟列表。

原理就是只展示可视区域的DOM
多线程

使用 new Worker 创建

worker脚本与主进程的脚本必须遵守同源策略。他们所在的路径协议、域名、端口号三者必须一致。
```
const myWorker = new Worker('./calcBox.js')
```
都使用postMessage发送信息：
```
myWorker.postMessage(arrayBuffer, [arrayBuffer])
```
都是用onmessage接收消息：
```
self.onmessage = function () {
    // worker脚本的内容
}
```
关闭：
```
myWorker.terminate()
```
防抖节流

笔记-第二十九章-性能优化（自用）

性能优化

分析打包之后的代码的体积

打包优化

vite提供的性能优化

vite提供的插件做性能优化