前端工程化概述

吴龙淼 写于 2022-02-10

统一规范

代码规范

esLint

styleLint

git规范

分支管理规范: 开发新功能,重大BUG主分支开一个分支

提交规范

feat: 新功能、新特性
fix: 修改 bug
perf: 更改代码,以提高性能
refactor: 代码重构(重构,在不影响代码内部行为、功能下的代码修改)
docs: 文档修改
style: 代码格式修改, 注意不是 css 修改(例如分号修改)
test: 测试用例新增、修改
build: 影响项目构建或依赖项修改
revert: 恢复上一次提交
ci: 持续集成相关文件修改
chore: 其他修改(不在上述类型中的修改)
release: 发布新版本
workflow: 工作流相关文件修改

项目规范

项目文件的组织方式(文件目录)

命名方式(变量,方法命名统一)


测试

单元测试

模块开发完成,测试单个模块的功能

系统测试

系统整体测试功能,性能

压力测试

并发,稳定性等

灰度测试

系统测试通过后,将测试版本发布到线上环境,替换部分的线上服务器代码进行预测试。当灰度测试结束后,线上版本实现会统一

a/b测试

系统测试通过并发布后,同一个软件功能不同的用户会看到不同的实现方式,收集每个用户的反馈。本质上是上线后的测试,收集用户反馈

部署

引用字节前端团队的文章,深入浅出

监控

性能监控

性能监控一般利用 window.performance 来进行数据采集

Performance 接口可以获取到当前页面中与性能相关的信息,它是 High Resolution Time API 的一部分,同时也融合了 Performance Timeline API、Navigation Timing API、 User Timing API 和 Resource Timing API。

错误监控

错误收集,可以了解到网站错误发生的类型及数量,从而可以做相应的调整,以减少错误发生

1.资源加载错误,通过 addEventListener('error', callback, true) 在捕获阶段捕捉资源加载失败错误
2.js 执行错误,通过 window.onerror 捕捉 js 错误
3.promise 错误,通过 addEventListener('unhandledrejection', callback)捕捉 promise 错误

可以使用现有工具监控 sentry

sentry 是一个用 python 写的性能和错误监控工具,你可以使用 sentry 提供的服务(免费功能少),也可以自己部署服务。现在来看一下如何使用 sentry 提供的服务实现监控。


重构

重构原则

  1. 重复代码,相同处理逻辑
  2. 代码过于复杂,行数过多,可读性差,难维护代码
  3. 一个方法对应多个功能,或者耦合度过高

重构技巧

  1. 提取重复代码,封装成函数
  2. 拆分太长或功能太多的函数