Vue3+TypeScript学习笔记（三十四）

35~38暂时跳过，讲的是Electron和webpack构建相关的操作，后面回来学习

在浏览器端，可以使用Lighthouse来评估性能，其中的主要指标有：

以上内容来自小余同学的笔记—— 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 应用

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

配置好PWA后执行构建操作，利用http-server起一个服务(安装http-server包，然后打开dist目录，执行http-server -p 端口号即可)，在devTools中的“应用”里看到service workers即为已激活

图片懒加载

import lazyPlugin from 'vue3-lazy'

虚拟列表

自动删除可视区域意外的DOM，能承受住大量（上万条）数据

WebWorker

当需要大量计算时可以用WerWorker创建一个后台进程，该进程不会影响主进程但不能操作DOM

1. worker 脚本与主进程的脚本必须遵守同源限制。他们所在的路径协议、域名、端口号三者需要相

同
const myWorker1 = new Worker("./calcBox.js");//后台运行，不会影响主进程

1. 都使用 postMessage 发送消息

worker.postMessage(arrayBuffer, [arrayBuffer]);

1. 都使用 onmessage 接收消息

self.onmessage = function (e) {
// xxx这里是worker脚本的内容
};//这些都是不允许去操作DOM的

1. 关闭

worker.terminate();
VueUse 库已经集成了 webWorker

VueUse

https://vueuse.org/