1. LightHouse分析

谷歌浏览器自带的DevTool进行性能分析LightHouse

参数介绍

Performance：整体跑分73分

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

2. 打包代码分析

由于项目使用的vite,而vite打包是基于rollup的，因此使用rollup插件打包

npm install rollup-plugin-visualizer

vite.config.ts配置 (ps：一定设置open:true 否则无效)

import { visualizer } from "rollup-plugin-visualizer";

export default defineConfig({
  plugins: [
    vue(),
    visualizer({ open: true }),
  ],
});

npm run build 进行打包，会自动弹出一个网页

由上可知，项目中使用的element-plus这个UI库非常大，可使用按需引入减少包的大小。

另外：关于打包提示

vite.config.ts配置

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

3. PWA离线缓存

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

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

npm install vite-plugin-pwa -D

vite.config.ts配置

import { VitePWA } from "vite-plugin-pwa";

export default defineConfig({
  plugins: [
    vue(),
    VitePWA({
      workbox: {
        cacheId: "WRY", //缓存名称
        runtimeCaching: [
          {
            urlPattern: /.*\.js.*/, //缓存文件
            handler: "StaleWhileRevalidate", //重新验证时失效
            options: {
              cacheName: "WRY-js", //缓存js，名称
              expiration: {
                maxEntries: 30, //缓存文件数量 LRU算法
                maxAgeSeconds: 30 * 24 * 60 * 60, //缓存有效期
              },
            },
          },
        ],
      },
    }),
  ],
});

npm run build打包，会生成 sw.js

打包后起服务

全局下载

npm install http-server -g

6.参考文档

blog.csdn.net/qq119556631…