基于 fre 的 c 站重构总结

C站基于fre框架的重构总结

本次重构源于C站暑假流量激增（累计用户超20万），原有Vue SSR架构性能不足且代码陈旧，决定采用fre框架（已完成测试且覆盖率达标）对首页进行全面重写，仅用时一天完成核心功能开发。

1. 性能问题

   原架构（Vue SSR）因代码久远（一年前）导致性能下降，无法支撑高并发流量。

   Vue 3发布延期，且生态工具（如vue-loader）未跟进，决定转向更轻量的fre框架。

2. 核心目标

   大道至简：砍掉非核心功能（如首页幻灯片、漫画、文章区），专注视频领域，避免成为“大而全”平台。

   技术精简：不使用第三方库（改用fetch替代axios）、状态管理（依赖hooks）、路由（自定义微前端方法）。

重构后首页仅保留五大核心板块：

• 推荐
• 排行榜
• 新番表
• 最新
• UGC（用户生成内容）

1. 技术栈

   Webpack：模块打包。

   Fre：轻量级框架，支持hooks和组件化开发。

   Stylus：CSS预处理器。

2. 新番表实现

   功能：按日期分类展示番剧，支持动态数据加载。

   代码逻辑：

   通过useEffect获取数据，按日期重新分类。

   使用useState管理当前日期和番剧列表。

   两次遍历完成数据分类与渲染。

   // 示例代码：新番表组件export default function WeekList(props) { const [posts, setPosts] = useState([]); const [day, setDay] = useState(new Date().getDay()); useEffect(() => { getPost('新番', '', 1, 100, 'nowait').then(res => { let ret = {}; res.posts.forEach(item => { let day = new Date(item.time).getDay(); ret[day] = ret[day] || []; ret[day].push(item); }); setPosts(ret); }); }, []); return ( <div className="week-list"> {/* 渲染逻辑省略 */} </div> );}

3. Suspense组件

   作用：外部抛出Promise，fre内部捕获并暂停调和，待Promise解析后继续渲染。

   自定义实现：通过createFetch函数封装异步逻辑，支持动态数据加载。

   // 示例代码：自定义Suspenseexport function createFetch(promise) { let pending = true; let result; return { useFetch(state) { if (pending) { throw promise(state).then(res => { pending = false; result = res; }); } else { return result; } } };}

1. 板块显示不全

   原因：fre框架缺乏异步队列，导致多个Promise同时解析时任务冲突。

   解决：增加异步队列，优化任务调度逻辑。

2. Suspense超时问题

   原因：任务超时后未正确继续渲染。

   解决：调整scheduler逻辑，确保超时任务能恢复执行。

3. 异步调度优化

   细节：

   Message Channel（MC）：替代setTimeout，减少时间浪费。

   requestAnimationFrame（rAF）：优化动画和DOM更新性能。

   Promise：管理Suspense和更新队列。

1. 重构成果

   首页性能显著提升，代码更简洁易维护。

   验证了fre框架在生产环境的可行性。

2. 未来计划

   逐步重构C站其他页面，全面替换原有架构。

   完善fre框架生态，优化异步调度和Suspense功能。

3. 相关链接

   fre框架GitHub仓库
   C站官网
   C站GitHub仓库

本次重构为C站的长期发展奠定了技术基础，后续将持续优化性能和用户体验。