WorkBuddy网页加载慢、样式错乱主因是静态资源未CDN加速。应：一、替换本地CSS/JS为jsDelivr等公共CDN链接；二、配置static子域名并接入CDN；三、启用SRI校验与强制缓存；四、删除.map文件及开发残留；五、CDN侧忽略随机参数并区分动静态缓存策略。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
如果您已成功安装WorkBuddy，但打开网页端后页面加载缓慢、样式错乱或脚本延迟执行，则极可能是静态资源（如CSS、JS、图标、字体）未通过CDN加速分发，仍从源站直接加载，导致首字节时间（TTFB）升高与缓存命中率低下。以下是针对性优化静态资源CDN加速配置的多种方法：
一、替换核心前端资源为公共CDN链接
WorkBuddy前端构建产物中若硬编码引用本地/static/路径下的Bootstrap、Vue、normalize.css等公共库，将丧失CDN边缘节点缓存优势。应主动将这些资源切换至高可用、强缓存的第三方CDN服务，利用其全球多节点与长期缓存策略降低加载延迟。
1、打开WorkBuddy部署目录下的index.html或主入口HTML文件。
2、查找类似<link rel="stylesheet" href="/static/css/bootstrap.min.css">或<script src="/static/js/vue.runtime.global.js"></script>的标签。
3、将其中路径替换为jsDelivr提供的确定性CDN链接，例如：
– Bootstrap 5.3.3 CSS：https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css
– Vue 3.4.27 ES模块版：https://cdn.jsdelivr.net/npm/vue@3.4.27/dist/vue.esm-browser.js
4、保存文件并清除浏览器缓存，重新访问页面验证Network面板中对应资源是否返回200且Size列显示“from disk cache”或“from memory cache”。
二、配置独立静态资源子域名并接入CDN
为WorkBuddy部署专用静态资源子域名（如static.workbuddy.local），可实现资源路径解耦、缓存策略精细化控制，并避免Cookie随静态请求发送，显著提升CDN缓存命中率与传输效率。
1、在DNS服务商处为static.workbuddy.local添加CNAME记录，指向您所选CDN提供商的加速域名（如abc.cdn.qcloud.com）。
2、登录CDN控制台，新增加速域名static.workbuddy.local，回源配置指向WorkBuddy服务器IP及端口（如192.168.1.100:80），并启用HTTPS强制跳转。
3、在WorkBuddy项目构建配置（如vite.config.ts或vue.config.js）中设置base为'/static/'，同时配置build.rollupOptions.output.assetFileNames为'static/assets/[name].[hash].js'等格式，确保产出资源路径统一归入/static/前缀下。
4、修改Nginx配置，在WorkBuddy主站server块内添加location ^~ /static/ { proxy_pass https://static.workbuddy.local; }，完成内部路径映射。
三、启用资源完整性校验（SRI）并强制缓存策略
CDN加速过程中若发生资源被中间节点篡改或版本错乱，会导致样式崩溃或脚本执行异常。启用Subresource Integrity（SRI）可确保浏览器仅加载与预设哈希值匹配的资源；配合CDN侧强制设置Cache-Control头，可防止因协商缓存失效引发重复下载。
1、使用openssl命令生成目标资源的sha384哈希值：openssl dgst -sha384 bootstrap.min.css | sed 's/.* //' | xxd -r -p | base64 -w0。
WorkBuddy 桌宠工厂 —— 给一张角色图、一个 codex.pet 链接、一条 codex-pets.net 下载 URL、或一份现成的精灵表，就能自动创建一只可联动 WorkBuddy 状态的桌面宠物。当用户说"创建桌宠"、"做一只桌宠"、"用这张图做桌宠"、"从 codex.pet 安装桌宠"、"导入 codex 桌宠 XX"、"装一下 codex-pets.net 上的 XX&quo
2、在HTML中对应<link>或<script>标签添加integrity与crossorigin属性，例如：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
integrity="sha384-..." crossorigin="anonymous">
3、登录CDN控制台，在“缓存配置”中新建规则：匹配路径/static/** 或 *.css/*.js，设置Cache-Control为public, max-age=31536000, immutable。
4、确认CDN响应头中包含上述Cache-Control字段，且浏览器DevTools → Network → Headers中Response Headers显示该值生效。
四、禁用开发模式残留资源与Source Map请求
WorkBuddy若以开发模式（dev mode）构建并部署，可能遗留.map文件请求、HMR热更新接口、未压缩的ESM模块等非生产必需资源，这些请求不仅无实际渲染作用，还会占用HTTP连接数、触发额外CDN回源，拖慢关键资源加载。
1、检查部署目录是否存在大量*.js.map、*.css.map文件，若有，全部删除。
2、确认构建命令为npm run build（非npm run dev），输出目录dist中无vite/hmr、__UNPLUGGED__等开发专用目录。
3、在index.html中移除所有形如<script type="module" src="/@vite/client"></script>或<script type="module" src="/src/main.js"></script>的开发入口，仅保留打包后生成的main.XXXXXX.js引用。
4、打开浏览器开发者工具，过滤Network请求中的*.map、/@vite/、/hot-update/关键词，确认无任何相关请求发出。
五、调整CDN缓存忽略参数与动态排除规则
部分WorkBuddy前端资源URL可能携带随机查询参数（如?ts=1744382220），导致CDN将其视为不同资源而无法复用缓存。需在CDN侧配置忽略特定参数，并对含敏感参数的路径进行缓存绕行，保障核心静态资源稳定命中。
1、进入CDN控制台“缓存配置”页面，开启“忽略指定参数”功能。
2、在忽略参数列表中添加ts、v、t、_t、random等常见时间戳或随机标识参数名。
3、新增一条缓存规则：匹配路径为/api/**、/auth/**、/user/** 的请求，设置缓存级别为不缓存（No Cache），确保动态接口始终回源。
4、对静态资源路径（如/static/、/assets/）单独设置缓存时间为30天，并勾选“忽略参数后缓存”选项，使https://static.workbuddy.local/css/app.css?v=2与https://static.workbuddy.local/css/app.css视为同一资源。
