一、什么是工程化?
前端工程化是使用软件工程的方法来解决前端的开发流程中模块化、组件化、规范化和自动化的问题,其主要目的为了提高效率和降低成本。
二、前端工程化的特点
模块化
模块化只是在文件层面上,对代码或资源的拆分。
组件化
而组件化是在设计层面上,对UI(用户界面)的拆分。
规范化
- 目录结构的制定
- 编码规范
- 前后端接口规范
- 文档规范
- 组件管理
- Git分支管理
- Commit描述规范
- 视觉图标规范
自动化
- 自动化测试
- 持续集成
- 自动化构建
- 自动化部署
三、如何实现工程化?
1、制定规范
在工程开发初期以及开发期间制定的系列规范。
2、库/框架选型
vue、react、 angular
3、简单构建优化
选择构建工具,对代码进行压缩,校验,之后再以页面为单位进行简单的资源合并。
4、JS/CSS模块化开发
js的模块化方案 :ADM、CDM、UMD、ES6 Module
css的模块化:less、sass。
5、组件化开发和资源管理
根据“增量”的原则,我们应该精心规划每个页面的资源加载策略,使得用户无论访问哪个页面都能按需加载页面所需资源,没访问过的无需加载,访问过的可以缓存复用,最终带来流畅的应用体验。