vue3、性能优化、跨域

用谷歌自带的devTools可以进行页面性能分析
First Contentful Paint 首页加载时间
Total Blocking Time 页面阻塞时间（首次页面绘制到用户可交互时间）
Speed Index 页面各个可见部分的显示平均时间（轮播图之类）
Largest Contentful Paint 最大dom绘制时间
Cumulative Layout Shift 计算布局偏移值得分，会比较两次渲染帧的内容偏移情况，可能导致用户想点击A按钮，但下一帧中，A按钮被挤到旁边，导致用户实际点击了B按钮

vite打包是基于rollup 
安装rollup 
npm install rollup-plugin-visualizer
vite.config.js中配置 
import {visualizer} from 'rollup-plugin-visualizer'
plugins中注册 visualizer({open: true})
再打包 npm run build 此时会弹出roullup的网页，可以用来查看引入包的块、体积

vite优化
build: {
    chunkSizeWarningLimit: 2000,
    cssCodeSplit: true,
    sourcemap: false,
    // 打包体积最小
    minify: 'terser',
    // 体积小于4000的图片转成base64
    assetsInlineLimit: 4000,
    
  },
  
 离线缓存
 PWA离线缓存技术久石让web无限接近native应用，实现离线缓存
 装包 vite-plugin-pwa
 plugins中注册
 VitePWA({
      workbox:{
          cacheId:"XIaoman",//缓存名称
          runtimeCaching:[
            {
              urlPattern:/.*\.js.*/, //缓存文件
              handler:"StaleWhileRevalidate", //重新验证时失效
              options:{
                cacheName:"XiaoMan-js", //缓存js，名称
                expiration:{
                  maxEntries:30, //缓存文件数量 LRU算法
                  maxAgeSeconds:30 * 24 * 60 * 60 //缓存有效期
 
                }
              }
            }
          ]
      },
    })
 
 图片懒加载
 虚拟列表
 多线程 使用  new Worker 创建 大量计算时后台开一个线程用于计算，不会阻塞主进程
 防抖节流
 
 跨域
 限制来源：浏览器同源策略，保障浏览器安全的一种机制
 请求url 协议。域名、端口号一个不同就会跨域
 
 解决方案
 jsonp  通过创建script
 
 function clickButton() {
    let obj, s
    obj = { "table":"products", "limit":10 }; //添加参数
    s =  document.createElement("script"); //动态创建script
    s.src = "接口地址xxxxxxxxxxxx"  + JSON.stringify(obj);
    document.body.appendChild(s);
 }
//与后端定义callback名称
function myFunc(myObj)  {
    //接受后端返回的参数
    document.getElementById("demo").innerHTML = myObj;
}
 
cors设置允许跨域，后端设置
{
  "Access-Control-Allow-Origin": "http://web.xxx.com" //可以指定地址
}
{
  "Access-Control-Allow-Origin": "*" //也可以使用通配符 任何地址都能访问 安全性不高
}

使用proxy代理