大家好，今天完整分享我用 Trae Work 打造个人 UI 作品集网站的全流程：从零搭建全站、上线发现性能灾难、再一步步精细化优化，全程踩坑 + 省积分经验一次性讲透。
一、从零启动：一句话需求生成整套作品集网站
最开始只有一个简单想法：做一套设计师个人静态作品集，不需要复杂框架，纯 HTML/CSS/JS 实现。
直接在 Trae Work 新建独立项目会话，输入完整需求，AI 一次性输出全套页面：
- 首页：3D个人IP形象、烟雾粒子、滚动视差、作品列表
- 作品详情页：多图画廊、项目介绍、大图预览弹窗
- 管理后台：作品新增 / 编辑 / 云端图片上传、本地存储同步
整个搭建阶段非常高效，导航、动效、云端图片上传逻辑、本地存储同步全部一次性生成，不用自己手写基础代码。
但当时完全没考虑性能与积分消耗，直接把全站所有页面丢进同一个对话迭代，为后面埋下两大隐患：
- 上下文无限膨胀，每轮对话 Token 爆炸，积分消耗极快；
- AI 只优先实现功能，完全没有性能处理。
二、初版上线：性能问题集中爆发
网站部署完成打开，问题全部暴露，加载、滚动体验很差：
- 作品详情页几十张高清大图同步请求，无压缩、无懒加载，打开页面疯狂并发加载图片；
- Three.js 3D 脚本头部同步加载，首屏白屏、主线程阻塞；
- 三层 Canvas 粒子、烟雾、3D 画布全程不间断渲染，滚动严重掉帧；
- 特殊字体无优化，访问长时间空白文字；
- 大量 PNG 原图体积巨大，Lighthouse 性能评分极低。这里附上网页优化前后对比图：
这个阶段踩了最大的积分坑：我直接把全站 4 个 HTML 源码一次性发给 AI，要求一次性全站性能重构。
结果：单次对话积分消耗翻倍，AI 同时处理几十项改动，代码频繁出现 bug，反复来回调试，积分快速见底。
三、切换 Trae Work 规范工作流：分阶段精细化优化
意识到问题后，我依靠 Trae Work 的多会话分组功能，拆分任务、分开优化，一套完整省积分工作流成型：
1. 会话分组隔离，一个会话只做单一页面优化
在 Work 内新建 3 组独立会话：首页优化、作品详情页图片专项优化、后台管理页优化，互不干扰，清空冗余上下文。
2. 分批次专项优化（重点解决详情页图片加载慢）
① 图片资源全局改造（核心提速点）
- 所有本地 PNG 统一转为 WebP 格式；
- Cloudinary 图片链接云端裁剪压缩，杜绝传输超大原图；
- 首屏封面图
loading="eager"，页面下方所有详情图片统一loading="lazy"； - 全部 img 标签补充宽高，固定宽高比消除页面抖动；
- 大图弹窗改为点击后动态加载高清图，不提前占用带宽。
② 3D 与 Canvas 动画性能根治
- Three.js 脚本改为滚动到角色区块再动态导入，首屏不加载 150KB+3D 库；
- 所有画布增加视口检测，离开屏幕立刻停止渲染循环；
- 删除全屏实时液体扭曲 SVG 滤镜，降低 GPU 渲染开销。
③ 字体、脚本加载逻辑优化
- Google 字体添加
display=swap，删减无用字重，解决文字白屏； - 外部 JS 添加
defer，滚动、鼠标监听增加节流防抖； - 页面切后台、失去焦点时停止轮询、销毁动画定时器。
④ 管理后台上传逻辑优化
图片压缩放到异步逻辑，批量上传串行执行，避免预览一次性渲染几十张图卡顿。
四、亲测有效｜前端网站场景专属省积分技巧
结合我从 0 建站 + 二次优化的完整经历，整理一套适配作品集项目的控分方法：
-
任务强制拆分，拒绝全量源码投喂
不要一次性上传所有页面，单页面独立会话优化，一次只解决一类问题（比如只优化详情页图片）。
-
及时清理臃肿上下文，5 轮对话左右新开会话
过长历史上下文会持续增加每轮请求开销，很多旧需求无需重复读取，属于无效积分消耗。
-
按需选择模型，简单任务不用高阶代码模型
图片参数、CSS、标签调整用轻量模型；3D 逻辑、全站大规模重构再启用高级模型。
-
本地提前预处理素材，减少 AI 重复劳动
图片本地筛选、统一尺寸，云端链接规则自己提前整理，不用让 AI 重复处理超大原图。
-
提示词严格约束边界，防止 AI 无效发散
每次指令明确：只做 XX 优化，不改动布局、动画、交互，避免 AI 额外生成无关代码。
-
善用 Work 会话分组，长期项目需求定向复用上下文
不同页面、不同阶段的需求分开存放，不用每次重新复述完整项目背景。
结尾小结
从一句话从零生成完整网站，到上线后发现严重性能缺陷，再依靠 Trae Work 拆分工作流精细化优化，整套流程走下来收获很多实用经验。
前期不懂规划，盲目一次性投喂全部代码，积分消耗飞快；后期规范会话、拆分任务、前置素材处理，同样的优化需求，积分直接节省一半以上。
工具只是辅助，合理规划工作流程，才能把每一点积分花在刀刃上。欢迎大家在评论区交流用 Trae 搭建网站、节省积分的小技巧！
