前端工程化思想

不少人可能这样认为，前端工程化无非就是框架/库、简单的构建、css/js模块化开发而已，其实这些只是前端工程话的一部分，当咱们开发一个大型的web应用的时候，将会面临不少工程方面的问题，好比：多人如何协做开发、组件模块如何复用、如何调试部署、版本如何管理控制、性能如何优化。所以，作好前端工程化，须要咱们作以下的几件事：

 

1.开发规范
制定好开发、部署的目录规范、编码规范、好的目录规范能让项目解构清晰，便于维护和扩展；好的编码规范能让团队人员的代码风格统一，便于代码的审查

2.模块化
针对JavaScript、CSS，以功能或者是业务为单元组织代码。JavaScript模块化方案有不少，如：AMD/CommonJS/UMD/ES 6 module等，CSS模块化基本都是在less、sass、stylus等预处理器的import/mixin特性的支持下完成的

3.组件化
将页面拆分红多个组件（component）。每一个组件依赖的CSS、JavaScript、模板、图片等资源放在一块儿开发和维护。组件是资源独立的，组件在系统内部可复用，组件和组件之间能够嵌套。如今比较流行的前端框架好比：React、Vue.js等都是提倡的是组件化开发方式。

4.组件库
有了组件库，咱们还想将一些很是通用的组件或者JavaScript模块放到一个公共的地方供团队共享，方便新项目的复用，这就造成了组件库，常见的组件库bower、component等。

5.性能优化
经过工程化手段来解决性能优化问题。好比常见的请求合并、资源压缩、CDN、甚至一些前沿的优化手段如bigpipe何bigender，都是经过工程化手段来保证的，面对业务开发者是透明的。

6.项目部署
项目部署通常包括静态资源缓存、CDN、增量发布等问题。合理的静态资源部署能够为前端性能带来较大的优化空间，而增量发布又为项目的版本控制、A/B Test方案提供了保证。

7.开发流程
完整的开发流程本地开发调试、视觉走查确认、先后端联调、测试、上线等环节。

8.工程工具
工程工具包括构建与优化工具、开发–调试–部署等流程工具、组件的获取和提交工具等。这些工具每每都是独立的系统，若是分开来用，成本过高了。所以可否串联这些功能，使得前端开发能够持续集成，工具的设计就变得相当重要了。