前端工程化概念介绍

学习来源:掘进小课---初探前端工程化

前端工程化介绍

工程的目的,是为了降低生产成本,提高生产效率。那么,前端工程是作什么的呢?
从目的性来说,前端的工程最终也是为了降低成本,提高效率的。
那么,要怎么做呢?或者说,要怎么定义前端的工程化呢?
个人拙见:开发效率高,运营方便,维护成本低为目的,系统化、严谨化、可量化的方式进行前端项目的搭建与开发。

前端工程化的内容

在平时的开发中,一个完整的迭代周期需要依次经过开发测试部署发布这几个环节,并且在产品上线后,还需要对产品进行稳定性保障---实时监控和报警,避免产品宕机。那么,工程化要做的就是在整个流程中降低成本,提高效率

开发阶段

开发阶段中,作为前端开发来说,需要和其他开发同学,如后端同学,服务端同学等进行协同开发,以及和产品,运营,测试,设计等同学进行开发合作沟通,那么,在开发阶段,最重要的就是如何降低这些成本,也就是说,在卡法阶段,工程化中降本提效的操作主要是降低团队内的人力成本以及跨团队的沟通、协作成本
方法手段:
建立各种协作规范技术方案或工具
协作规范,包括但不限于代码规范,代码提交规范等手段;
技术方案或工具:目前工程化的主要手段:
1.脚手架:快速创建前端应用的项目结构并生成模板;
2.公共库:维护可复用的UI组件库或工具模板等公共资源;
3.包管理器:方便引入第三方库或组件
4.调试工具:本地服务器、热更新等,便于调试。

测试阶段

1.测试框架:提供针对单元测试、快照等自动化测试支持(内心os:作为一个练习时长两年半的前端练习生,我不会写单元测试,也不懂快照,自动化测试的知识对于我来说还是全新未涉足的领域,o(╥﹏╥)o)
2.静态扫描工具:可以进行开发规约/最佳实践或者代码质量等方面的静态检查(这个我也不懂o(╥﹏╥)o)
3.性能测试工具:监控并统计性能数据。
测试阶段的工程化内容,全都是我的知识盲区,天了噜o(╥﹏╥)o。

构建阶段

构建阶段的工程化操作,在各种预编译器如sass,less等的兴起,在构建阶段需要加入css预编译的支持,并且在TS和三大框架vue、react、angular的发展和普及下,在构建阶段也需要加入响应的编译过程才能转化为浏览器可识别的语言。
编译阶段工程化的手段方法:
1.编译:css预编译、ES6+新语法的降级、框架的编译
2.优化策略:代码压缩混淆、按需加载
3.部署策略:Hash指纹、CDN配置

部署阶段

部署时,需要将项目中的代码上传至服务器中,而在这个阶段的工程化,就是将这一部分的操作自动化执行。

监控阶段

作为开发来说,监控阶段只要是监控接口请求,白屏报警的异常情况,也有团队需要监控其他的性能数据(我还遇到过),那么在这个阶段的工程化手段有:
1.埋点:统计、分析业务数据,跟踪性能指标
2.监控平台:观察线上的异常信息,包括接口请求成功率,报错,白屏,流量异常等。

总结

以上内容记录来自掘金小册---初探前端工程化。

前端工程化目的

降低生产成本,提高生产效率。

前端工程化的方法

1.开发工程中,建立协作规范,利用各种技术方案和工具:使用脚手架创建项目;封装公共UI库和方法工具;使用包管理工具来引入第三方库或工具;调试工具的使用。
2.自动化测试:单元测试,快照等;代码质量检查等
3.css预编译,ES6+新语法降级,框架编译,代码压缩混淆,按需加载组件,部署策略
4.实现自动化部署
5.接口请求成功率监控,报错、白屏、流量异常等监控,埋点:统计、分析业务数据,跟踪性能指标