前端基建

关于“基建”

什么是基建

“技术基建”，就是研发团队的技术基础设施建设，一个团队通用技术能力的沉淀。小到文档规范，脚手架工具，大到工程化、各个领域工具链，凡是能促进业务效率、沟通成本都可以称作基建。

基建的意义

• 业务复用，提高效率： 基建可以提高单个人的工作产出和工作效率，可以从代码层面解决一些普遍性和常用性的业务问题
• 规范、优化流程制度： 优异的流程制度必将带来正面的、积极的、有实效的业务支撑。
• 更好面对未来业务发展： 像建房子一样，好的地基可以建出万丈高楼。
• 影响力建设、开源建设：建设结果对于业务的促进，更容易获得内部合作方的认可；沉淀下来的好的经验，可以对外输出分享，也是对影响力的有力帮助。

基建搞什么

核心：

• 三个落地要素： 公司的团队规模、公司的业务、团队水平。

• 四大基础特性： 技术的健全性、基建的稳定性、研发的效率性、业务的体验性。

方向

• 技术规范： 代码规范、工程规范、开发规范、测试规范、文档规范、工具规范、流程规范、规范的规范。
• 技术工具： 代码工具、工程工具、开发工具、测试工具、文档工具、流程工具、规范工具、工具链。
• 技术框架： 代码框架、工程框架、开发框架、测试框架、文档框架、流程框架、规范框架、框架链。

基建开始之前，首先得确定建设的策略及步骤，主要是从 拆解研发流程 入手的： 一个基本的研发流程闭环一般是：需求导入 => 需求拆解 => 技术方案制定 => 本地编码 => 联调 => 自测优化 => 提测修复 Bug => 打包 => 部署 => 数据收集&分析复盘 => 迭代优化 。 在研发流程闭环中每一个环节的阻塞点越少，研发效率就越高。基建，就是从这些耽误研发时间的阻塞点入手，按照普遍性 + 高频的优先级标准，挨个突破。

建设内容

通用的建设公式为：标准化 + 规范化 + 工具化 + 自动化。能力完备后，可进一步提升至平台化 + 产品化。主要建设方向包括：

• 开发规范：制定团队共识，确保高效协作。
• 研发流程：优化流程，提高上下游协作效率。
• 工程管理：实现应用全生命周期管理，降低成本。
• 性能体验：自动化工具化发现和优化页面性能瓶颈。
• 安全防控：建立安全机制，保障应用安全。
• 统计监控：采集、分析数据，实现线上异常监控。
• 质量保障：通过自测、单测、自动化测试等手段，提升代码质量。

具体建设内容

规范和文档：

• 新人文档（公司、业务、团队、流程等）
• 技术文档（架构设计、开发规范、代码风格、接口文档等）
• 业务文档（业务流程、业务规则、功能需求等）
• 项目文档（项目背景、目标、设计、开发、测试、部署等）
• 计划文档（月度、季度、年度计划等）
• 规范文档（项目目录规范、代码书写规范、git 提交规范等）

脚手架：

• 快速初始化项目结构
• 配置构建工具（如 Webpack、Rollup）
• 集成开发依赖（如 Babel、ESLint、Prettier）
• 提供常用命令（如 npm start、npm build、npm test）
• 可选：提供插件服务（如 Lint、Mock）

组件：

• UI 组件：
  • 基础组件（如按钮、输入框、下拉菜单）
  • 业务组件（如表单、表格、图表）
• 业务组件：
  • 通用业务逻辑组件（如登录、注册、支付）
  • 业务场景组件（如商品详情、订单列表）
• 功能组件：
  • 上拉刷新
  • 滚动到底部加载更多
  • 虚拟滚动
  • 拖拽排序
  • 图片懒加载

工具/函数库：

• 常用方法封装：
  • query 参数解析
  • device 设备解析
  • 环境区分
  • localStorage 封装
  • Day 日期格式封装
  • Thousands 千分位格式化
  • 防抖
  • 节流
  • 数组去重
  • 数组扁平化
  • 排序
  • 判断类型
• API 管理：
  • axios 或 fetch 二次封装
  • 关注项目相关逻辑
  • 请求异常返回对象，code 为异常状态
  • 规定的目录结构和格式导出和导入
• BFF（Backends For Frontends）：
  • 将后端复杂微服务聚合成对前端友好的统一 API

模板：

• 通用后台管理系统基础模版封装
• 通用小程序基础模版封装
• 通用 H5 端基础模版封装
• 通用 Node 端基础模版封装
• 其他类型项目默认模版封装

CI/CD 构建部署：

• 自动化部署流程（如 Jenkins、CircleCI）
• 云打包、云检测
• 插件化检测机制（如 ESLint、Stylelint）
• 代码合规性静态检测能力

数据埋点与分析：

• Web 数据埋点：
  • 埋点规范
  • 埋点 SDK
• 数据收集及分析：
  • PV/UV
  • 链路分析
  • 转化分析
  • 用户画像
• 可视化：
  • 可视化热图
  • 坑位粒度数据透出

微前端：

• 将大型前端应用拆分为小型前端应用
• 可聚合成平台
• 技术栈可不同
• 成熟框架：qiankun 等