整体设计
技术选型
● vue3
● vite
业务流程
功能需求
性能需求
安全需求
详细设计
1、 项目技术预研
● 项目背景
● 项目体量
● 功能需求收集
● 多端应用(web端:PC,H5, 客户端: APP, 桌面端: electron)
2、项目分析分解(流程架构图能力考察)
● 基础层和业务层的模块划分
● 业务按照页面page进行解耦
● 基础层按UI组件化,功能(接口)模块化
● 可分为数据、模块、模板、页面几种实体
3、项目技术选型
4、项目工具链体系
● 项目结构搭建
● 项目规范管理
● 项目编码设计
● 项目打包构建
● 项目模块测试
● 项目工程部署
● 项目持续集成
5、项目性能优化
● 现状评估和建立指标
页面加载性能 动画与操作性能 内存消耗
● 技术方案
静态资源优化(利用网络和缓存特性)
缓存
请求复用(DNS,HTTP2)
减少请求数(文件打包压缩合并等)
减小文件
CDN
动态运行时优化
如何利用语言特性,框架特性,算法机制(空间内存和时间的取舍)
客户端代码运行时优化
交互优化
● 执行
● 结果评估和监控(performance API)
6、项目功能迭代和维护
● 版本管理
● 代码规范
● 文档记录
7、项目监控
● 前端埋点
● 异常上报
