# 前端工程化
什么是工程化？
工程化即系统化、模块化、规范化的一个过程。指将具有一定规模数量的单个系统或功能部件，按照一定的规范，组合成一个模块鲜明、系统性强的整体。工程化往往包含大量学科和学科分支的知识，是一个复杂的系统工程过程。
早期前端开发只是写个html，css，大多页面可能就只有文字与图片、没有过多的交互，不成规模，所以就没有所谓的工程化一说。
随着前端技术的发展，前端应用日趋复杂，前端的工作也逐渐变得繁重，这时候前端就达到了一定规模，也将面临更多的工程问题，例如：
- 大体量：多功能、多页面、多状态、多系统；
- 大规模：多人甚至多团队合作开发；
- 高性能：CDN部署、缓存控制、文件指纹、缓存复用、请求合并、按需加载、同步/异步加载；
- ...
前端工程化是使用软件工程的技术和方法来进行前端的开发流程、技术、工具、经验等规范化、标准化，其主要目的为了提高效率和降低成本，即提高开发过程中的开发效率，减少不必要的重复工作时间，
# 如何实施
从前端工程的整个生命周期中各个部分的工作进行考虑深入
面向过程的前端工程体系
工程创建→开发→测试→构建→部署→监控
从脚手架到监控系统，配套的前端工程体系已经融入到了前端工作流的每个环节，很大程度上决定着前端生产效率
# 工程创建与开发
开发阶段的首要任务是创建样板项目（一并选择前端框架、类库），接着开始修改-验证的主循环，主要涉及这些工程化设施：
- 脚手架：创建前端应用的目录结构，并生成样板代码
- 组件库：维护着可复用的 UI 组件、工具模块等公共资源
- 依赖管理器npm：引入第三方库/组件，并跟踪管理这些依赖项
- 编辑器：提供语法高亮、智能提示、引用跳转等功能，提升开发体验
- 构建工具webpack：提供语法校验、编译、打包、DevServer 等功能，简化工作流
- 调试套件：提供预览、DevTools、Mock、性能分析诊断等调试功能，加速修改-验证的主循环
# 测试阶段
开发完成，进入测试阶段，先要对整体功能进行充分自测，再移交专业的测试人员验证，过程中需要用到工程化设施有：
- 单元测试框架：提供针对组件、逻辑的测试支持
- 静态扫描工具：从代码质量、构建产物质量、最佳实践/开发规约等多个维度做静态检查
- 自动化测试工具：针对 UI 效果和业务流程，提供测试支持
- 性能测试工具：监测并统计出相对准确的性能数据
# 构建阶段
不同于开发阶段，在构建阶段要做更多的极限优化和流程联动，涉及：
- 打包脚本：在语法校验、编译、打包的基础上，进行合并、压缩、代码拆分 (opens new window)、图片处理、SSR (opens new window)等极限优化
- 构建服务：支持多任务并行打包、通知
# 部署阶段
最后将经过充分测试的前端应用程序部署到生产环境，需要这些工程化工具：
- 发布平台：将前端资源上传至 CDN 或 SSR 渲染服务，或者以离线包的形式集成到移动客户端
- 迭代管理平台：提供 CI/CD 支持
# 监控阶段
前端应用程序上线之后，还需要持续关注线上的实际效果和异常情况，依赖这些工程设施：
- 埋点平台：统计、分析业务数据，跟踪性能指标
- 监控平台：观察线上的异常信息，包括报错、白屏、流量异常等
# 总结
从面向过程的角度来看，前端工程是贯穿前端应用生命周期的一系列工程设施，用来保障前端应用的开发体验、质量和交付速度
具体的，前端工程围绕开发、构建、发布 3 条主线展开，以工具化、自动化等手段解决各个环节所遇到的问题。一方面控制前端开发的复杂度，提高前端生产效率，另一方面降低架构升级、协作模式变化等带来的迁移、适配成本，提升开发体验