35~38暂时跳过，讲的是Electron和webpack构建相关的操作，后面回来学习
在浏览器端，可以使用Lighthouse来评估性能，其中的主要指标有：
| 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 按钮 |
以上内容来自小余同学的笔记—— https://github.com/2002XiaoYu/Latest-front-end-Notes/blob/main/Vue3%E2%80%94%E2%80%94%E5%9F%BA%E7%A1%80%E5%86%85%E5%AE%B9%E9%83%A8%E5%88%86(%E5%B0%8F%E6%BB%A1%E7%89%88%E6%9C%AC).md.md)
生成组件分析的网页
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// import vueJsx from '@vitejs/plugin-vue-jsx'
import tsx from './src/Plugins/index'
// 自动引入插件:记得在下方配置
import AutoImport from 'unplugin-auto-import/vite'
import { visualizer } from 'rollup-plugin-visualizer'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
tsx(),
AutoImport({
imports: ['vue'],
dts: 'src/auto-import.d.ts', // 生成声明文件并存放到指定地址
}),
visualizer({ open: true }),
],
// 在build中写入配置项
build: {
chunkSizeWarningLimit: 2000,
cssCodeSplit: true, //css 拆分
sourcemap: false, //不生成sourcemap
minify: false, //是否禁用最小化混淆，esbuild打包速度最快，terser打包体积最小。
assetsInlineLimit: 5000, //小于该值 图片将打包成Base64 ，Base64的就不会被打包加载到容器里
},
server: {
proxy: {
'/api': {
target: 'http://localhost:8888',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api$/, ''),
},
},
},
})
离线缓存PWA
安装：pnpm add vite-plugin-pwa -D
import { VitePWA } from 'vite-plugin-pwa'
plugins: [vue(),VitePWA(), vueJsx(),visualizer({
open:true
})],部分配置项：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// import vueJsx from '@vitejs/plugin-vue-jsx'
import tsx from './src/Plugins/index'
// 自动引入插件:记得在下方配置
import AutoImport from 'unplugin-auto-import/vite'
// 构建后显示项目数据的html文档
import { visualizer } from 'rollup-plugin-visualizer'
// 引入pwa离线缓存插件
import { VitePWA } from 'vite-plugin-pwa'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
tsx(),
AutoImport({
imports: ['vue'],
dts: 'src/auto-import.d.ts', // 生成声明文件并存放到指定地址
}),
visualizer({ open: true }),
// VitePWA的配置项在这里
VitePWA({
workbox: {
cacheId: 'XIaoman', //缓存名称
runtimeCaching: [
{
urlPattern: /.*\.js.*/, //缓存文件
handler: 'StaleWhileRevalidate', //重新验证时失效
options: {
cacheName: 'XiaoMan-js', //缓存js，名称
expiration: {
maxEntries: 30, //缓存文件数量 LRU算法(优先缓存活跃的)
maxAgeSeconds: 30 * 24 * 60 * 60, //缓存有效期
},
},
},
],
},
}),
],
// 在build中写入配置项
build: {
chunkSizeWarningLimit: 2000,
cssCodeSplit: true, //css 拆分
sourcemap: false, //不生成sourcemap
minify: false, //是否禁用最小化混淆，esbuild打包速度最快，terser打包体积最小。
assetsInlineLimit: 5000, //小于该值 图片将打包成Base64 ，Base64的就不会被打包加载到容器里
},
server: {
proxy: {
'/api': {
target: 'http://localhost:8888',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api$/, ''),
},
},
},
})
PWA 技术的出现就是让 web 网页无限接近于 Native 应用
- 可以添加到主屏幕，利用 manifest 实现
- 可以实现离线缓存，利用 service worker 实现
- 可以发送通知，利用 service worker 实现
配置好PWA后执行构建操作，利用http-server起一个服务(安装http-server包，然后打开dist目录，执行http-server -p 端口号即可)，在devTools中的“应用”里看到service workers即为已激活
图片懒加载
import lazyPlugin from 'vue3-lazy'
虚拟列表
WebWorker
当需要大量计算时可以用WerWorker创建一个后台进程，该进程不会影响主进程但不能操作DOM
- worker 脚本与主进程的脚本必须遵守同源限制。他们所在的路径协议、域名、端口号三者需要相
同
const myWorker1 = new Worker("./calcBox.js");//后台运行，不会影响主进程
- 都使用 postMessage 发送消息
worker.postMessage(arrayBuffer, [arrayBuffer]);
- 都使用 onmessage 接收消息
self.onmessage = function (e) {
// xxx这里是worker脚本的内容
};//这些都是不允许去操作DOM的
- 关闭
worker.terminate();
VueUse 库已经集成了 webWorker
