最近无意中在github上看到大牛张云龙写的关于前端工程化的文章，虽然文章是几年写的，但我读完之后依旧收获满满，不得不说，我对前端的认知还真不是落后一丢丢。

我对前端的认识还停留在，如何用代码快速实现需求。那么也就自然而然认为，提升自己编写js、css、html的能力，以及熟悉掌握流行的前端框架才是自己的后续重点。而张云龙大佬在文章指出，应该从工程的角度看待前端，编码只是前端的一小部工作。下面就写写我对文章后，对前端工程化的理解。

首先从前端认识来说，可以分为四个阶段：库/框架选型、简单构建优化、js/css模块化开发、组件化开发与资源管理。
库/架构选择：在开始前端工程时，根据项目特征进行技术选型，节省项目开发时间；

简单构建优化：为了提升网站的性能，所以会选择构建工具，对前端代码进行压缩，校验，之后再以页面为单位进行简单的资源合并；

js/css模块化开发：为解决协同开发等问题，将大文件拆分成小文件，保持小颗粒度的模块化开发，同时提高了代码的可维护性；

组件化开发与资源管理：组件化开发即将页面元素拆分成各个独立的可视/可交互功能单元(即组件)，从而实现协同分工和功能复用，提高开发效率和可维护性。资源管理表示通过资源加载框架，按需加载页面，提升用户打开页面速度。

下面是前端工程化需要考虑因素：
开发规范：包括开发、部署的目录规范，编码规范等。可以提升代码开发效率，同时，方便快速定位问题。

模块化开发：针对js,css以功能或者业务为单元组织代码。js方面可以解决独立作用域、依赖管理、api暴露、按需加载与执行、安全合并等问题；css方面解决依赖管理、组件内部样式管理等问题。同时，方便协同开发，提高代码的可维护性。常见模块化框架有：requriejs、seajs等。

组件化开发：在模块化基础上，以页面独立可视/可交互功能为单位的js、css、html代码片段放在一起进行开发、维护，组件单元是资源独立的，组件在系统内可以复用。比搜索框、对话框等。方便团队并行开发和效率。

组件仓库：在组件化的基础上，将一些非常通用的组件放在一个公共的地方供团队共享，方便新项目复用。

性能优化：前端项目发展到一定阶段就必须考虑性能优化。

项目部署：包括对静态资源缓存、cdn、非覆盖式发布等问题。合理的静态资源部署可以为前端性能带来较大的优化空间。

开发流程：包括本地开发调试、视觉效果走查确认、前后端联调、提测、上线等环节。

开发工具：工程工具包括构建与优化工具、开发-调试-部署等流程工具，以及组件库获取、提交等相关工具，甚至运营、文档、配置发布等平台工具。