获取详细信息
userAgent
前端系统将会被用到哪里?电脑、手机、平板?如果大部分用户的browser版本老旧,例如IE11,对开发产生什么样的影响?
user & scale
用户群体是什么样的?年龄?性别?需求?将来有无大幅扩大规模的可能性?mvp的上线最重要的是抓住主要需求,以QQ的MVP举例: 如果用户有很多特殊群体,也需要考虑产品的Accessbility(a11y)
i18n
如果用户分布在相当广的情况下,考虑使用CDN来分发静态资源,加快访问速度。
MVP需求分析
功能性需求
以朋友圈为例,发布一条朋友圈,好友点赞,按照时间顺序浏览朋友圈等等,这些都是功能性需求。
非功能性需求
非功能性需求更多集中在用户不可见的部分。例如:响应式、无网络状态下的访问、是否实时推送等等。
组件功能设计
设计一些小的compenents时候,需要考虑到一些功能,例如,删除操作、拒绝等不可逆操作需要二次弹窗确认,
状态管理
使用pinia、redux或是props在组件当中通信。
接口设计
对于发明机会数据类型,endpoint地址,要和后端有详细的约定
网络请求
实现类似chatGPT的流式输出,使用fetchEventSource
这一个微软提供的库,基于SSE
性能
提升前端性能核心指标:LCP, CLS, FID等
- 打包工具
- 异步请求
- 使用支持treeshaking的库、手写方法
- CDN、懒加载
- 图片按照大小base64或者异步加载
- 合并小数据量接口
- 骨架屏、loading
A11y
使用更加语义化的HTML标签,例如:使用button而非div、使用img的alt属性
reference: medhat.dev/blog/cracki... open.alipay.com/portal/foru...