最近无意中在github上看到大牛张云龙写的关于前端工程化的文章,虽然文章是几年写的,但我读完之后依旧收获满满,不得不说,我对前端的认知还真不是落后一丢丢。
我对前端的认识还停留在,如何用代码快速实现需求。那么也就自然而然认为,提升自己编写js、css、html的能力,以及熟悉掌握流行的前端框架才是自己的后续重点。而张云龙大佬在文章指出,应该从工程的角度看待前端,编码只是前端的一小部工作。下面就写写我对文章后,对前端工程化的理解。
首先从前端认识来说,可以分为四个阶段:库/框架选型、简单构建优化、js/css模块化开发、组件化开发与资源管理。
库/架构选择:在开始前端工程时,根据项目特征进行技术选型,节省项目开发时间;
简单构建优化:为了提升网站的性能,所以会选择构建工具,对前端代码进行压缩,校验,之后再以页面为单位进行简单的资源合并;
js/css模块化开发:为解决协同开发等问题,将大文件拆分成小文件,保持小颗粒度的模块化开发,同时提高了代码的可维护性;
组件化开发与资源管理:组件化开发即将页面元素拆分成各个独立的可视/可交互功能单元(即组件),从而实现协同分工和功能复用,提高开发效率和可维护性。资源管理表示通过资源加载框架,按需加载页面,提升用户打开页面速度。
下面是前端工程化需要考虑因素:
开发规范:包括开发、部署的目录规范,编码规范等。可以提升代码开发效率,同时,方便快速定位问题。
模块化开发:针对js,css以功能或者业务为单元组织代码。js方面可以解决独立作用域、依赖管理、api暴露、按需加载与执行、安全合并等问题;css方面解决依赖管理、组件内部样式管理等问题。同时,方便协同开发,提高代码的可维护性。常见模块化框架有:requriejs、seajs等。
组件化开发:在模块化基础上,以页面独立可视/可交互功能为单位的js、css、html代码片段放在一起进行开发、维护,组件单元是资源独立的,组件在系统内可以复用。比搜索框、对话框等。方便团队并行开发和效率。
组件仓库:在组件化的基础上,将一些非常通用的组件放在一个公共的地方供团队共享,方便新项目复用。
性能优化:前端项目发展到一定阶段就必须考虑性能优化。
项目部署:包括对静态资源缓存、cdn、非覆盖式发布等问题。合理的静态资源部署可以为前端性能带来较大的优化空间。
开发流程:包括本地开发调试、视觉效果走查确认、前后端联调、提测、上线等环节。
开发工具:工程工具包括构建与优化工具、开发-调试-部署等流程工具,以及组件库获取、提交等相关工具,甚至运营、文档、配置发布等平台工具。