项目设计 ​

如何设计一个项目，如何面对项目中的一些痛点？

技术方案设计与选型 ​

从 0 搭建一个项目

1. 前端框架与脚手架
2. 状态管理工具
3. 路由管理工具
4. 代码构建与编译工具

技术选型的影响因素 ​

1. 项目规模、功能交互、面向用户
2. 多人协作、团队规模
3. 团队技术栈、新技术的接受程度
4. 参考现有的技术方案、调整

• 前端框架和工具选型

1. 使用开源/现有框架
2. 造轮子

• 选择适合团队的技术栈

1. 团队现有的技术栈
2. 团队成员对现有框架/工具的熟悉程度
3. 团队成员是否有倾向的框架/工具

多人协作与团队规范 ​

• 编码规范

Eslint、Prettier、Git Commit Hooks

• 代码流程规范

创建分支过程、提交代码过程、分支提交过程、合入主干过程、代码发布过程（CI/CD）

前端工程化 ​

通过项目设计和架构优化，提升系统质量；通过自动化的方式，将项目研发与发布流程进行优化，提升开发效率

大型项目痛点 ​

前端团队人数 10+、模块数量 30+、代码量 30w+

模块耦合严重 ​

1. 项目规模调整后，对现有架构设计进行分析，不合适进行及时的设计调整与优化
2. 使用模块解耦的技术方案，将各个模块统一交由框架处理
3. 梳理各个模块的职责，明确每个模块负责的工作和提供的功能，确定各个模块间的边界和调用方式

避免耦合

• 依赖倒置
• 事件通信（Event/Emitter)

项目复杂熟悉成本过高 ​

1. 每个开发者都认领（或分配）一个或多个模块，并要求掌握熟悉模块的细节，并维护文档
2. 需求开发、bug 修复、技术优化，找对应的模块负责人进行风险评估以及代码 review
3. 模块的负责人负责自身模块的技术优化方案，性能优化、自动化测试、代码规范调整
4. 对于核心复杂模块，可由多个负责人共同维护，协商技术细节

项目代码量过大 ​

• 拆：拆模块、拆公共库、拆组件库
• 分：分流程、分步骤

1. 代码按需引入，移除不必要的代码（Tree-shaking）
2. 异步加载模块
3. 加载流程优化，分析首屏
4. 差异化服务，不同场景只加载所需要的模块内容（读写分离）
5. 代码复用，封装

项目管理

• multirepo 多包管理，体积代码量小，构建可选（缺点：问题定位困难，模块变动其他模块配置都需更新）
• monorepo 单包管理，配合 lerna，方便调试以及修复（缺点：体积大，代码可维护性、可测试性要求高，版本控制以及 Git 工作流要求高）

问题定位效率低 ​

1. 模块负责人对自身模块执行的关键点进行标记，在开发+调试模式下，其他开发可通过开启断点方式来直接定位问题
2. 查看调用栈自行分析

项目前期准备与复盘 ​

前期准备

• 预期功能
• 预计工作量和分工排期
• 每个阶段（开发、联调、产品体验、提测、发布）的时间点
• 延期风险（交互、设计、接口协议）

复盘

• 时间维度
• 质量维度