性能优化

性能优化之 --- CDN

CDN执行原理是：

当用户请求访问这些资源时，CDN会根据用户的地理位置和网络状况，自动选择最优的服务器进行响应，从而提高网站的访问速度和稳定性。 缓存服务器会检查自己的缓存中是否有用户请求的资源，如果有，则直接返回给用户；如果没有，则向源服务器请求资源，并将资源缓存到自己的服务器上，以便下次用户请求时可以更快地响应。

静态打包资源缓存

配置相关的.env参数识别jenkins打包环境，在OOS中区分测试/生产环境文件夹，实现打包过程中自动上传到OSS中。

vite相关配置实现

//引用vite-plugin-ali-oss
import vitePluginAliOss from 'vite-plugin-ali-oss'

//配置oss参数
const options = {
  bucket: '#',
  region: '#',
  overwrit: true,//	如果文件已存在，是否覆盖
  accessKeyId: '#',
  accessKeySecret: '#',
}

//plugins 配置
plugins: [vitePluginAliOss(options)]

// 文件夹时间区分（便于日后文件堆积管理）
const now = new Date();
const year = now.getFullYear();
const month = ('0' + (now.getMonth() + 1)).slice(-2);
const day = ('0' + now.getDate()).slice(-2);
const currentDate = `${year}${month}${day}`

//defineConfig配置
export default defineConfig((mode: ConfigEnv): UserConfig => {
    return {
        base:  isUpload ? `https://###/##/${baseFile}/${currentDate}` : env.VITE_MAIN_HOST,
    }
})

CDN 预热/刷新

在性能测试中反馈，首次用户打开构建完页面所需的时长同比之后会稍微长一点，通过了解可知对CDN预热概念。 每天只有1000条可预热的文件限制， 实现过程中不可超过最大（项目小文件不会过多），那么实现分批次处理

// 引入文件 （tool-aliyun-cdn陈年老插件，试了几个还好这个可以）
import AliyunCDN from 'tool-aliyun-cdn'
import path from 'path'
import fs from 'fs'

//通过fs获取打包后dist目录下的文件遍历出来，由于预热是不能对目录进行操作，只对单条文件路径进行预热，故需要遍历成数组的

// 上传之前需要进行CDN刷新，可避免线上缓存问题影响
cdn.refresh({})
cdn.request({
    url: cdn.preloadRefresh({})
})