哔哩哔哩Web首页重构——回首2021

见贤思齐

本期作者刘磊高能链开放平台资深前端开发工程师01 前言在 2021 年时我们通过数据分析发现：在电脑端有越来越多用户的电脑屏幕切换成了大屏，现有 B 站的网页设计风格已经难以在宽屏设备上高效率的做内容分发，因此我们决定对? B 站网页版的整体视觉风格做一个大的更新，目标是能够在大屏和小屏上都能够对内容做到高效率的分发。B站的网页端页面数量众多、业务逻辑复杂，因此我们决定先从用户感知最明显、且相对复杂的B站首页开始推进这个计划。02 方案用户：因为B站的用户大多是年轻人，所以对于改版的接受能力较强，且用户软件版本较新，因此我们可以采用稍微激进一些的技术方案配合灰度控制来做改版。部分小众用户有自定义B站主题的需求，因此在改版前要考虑他们 hack 时的体验。产品：以提高分发效率为目标，尝试提升内容屏占比 + 更深入的与 AI 推荐相结合做内容分发。设计：为了让整个网页保留适配窄屏（iPad）和更大屏幕（带鱼屏）的可能性，整个新版网页的设计语言是“栅格化 + 响应式”。采用更扁平化的结构设计，弱化色彩，增强对内容的呈现；结构化页面元素，组件化设计，提升产品迭代效率。研发：JS：在 2021 年这个时期对 Web 项目进行大规模重构最好的技术选型是 NextJS（React）或 Vue3，在公司内部我们 Vue 用的较多，且 NextJS 更适合海外项目，因此我们决定使用 Vue3 作为基础框架。当时基于 Vue3 的 SSR 方案还在演化，ESR 的方案少有用例，再加上团队在过往的积累中对 SSR 更加熟练，因此我们决定基于 Vue3 框架自己实现一套 SSR 渲染的方案。（PS：体验上 CSR