前端工程化是一个高程次的思想，可以理解为模块化和组件化是工程化的表现形式。
另一种解释，更详细的工程化前端系统：
技术业务相关：
1. 开发规范
2. 模块化开发
3. 组件化开发
技术沉淀及共享需求：
4. 组件仓库
工程优化需求：
5. 性能优化
6. 项目部署
7. 开发流程
8. 开发工具
大部分我们谈“工程化”，其实只是“工具化”
来自美团技术团队的分析：
根据具体的业务特点，将前端的开发流程、技术、工具、经验等规范化、标准化就是前端工程化。它的目的是让前端开发能够“自成体系”，最大程度地提高前端工程师的开发效率，降低技术选型、前后端联调等带来的协调沟通成本。
模块化
什么是模块化呢？
举个简单的例子，我们要写一个实现A功能的js代码，这个功能在项目的其它位置也能用到，那么我们就可以把这个功能当做是一个模块，采用一定的方式进行模块化编写，既能实现复用还方便日后单独维护。
同理，在写样式的时候，如果需要某种特殊的样式，会在很多地方应用，那么我们一定可以通过某种方式将css模块化。
具体来说，js模块化方案有很多，比如说AMD/CommonJS/UMD/ES6 Module等。css模块化开发大多是在less、sass、stylus等预处理器的import/mixin特性支持下实现的。
组件化
页面上每个独立的、可视／可交互区域视为一个组件；
每个组件对应一个工程目录，组件所需的各种资源都在这个目录下就近维护；
由于组件具有独立性，因此组件和组件之间可以自由组合；
页面只不过是组件的容器，负责组合组件形成功能完整的界面；
当不需要某个组件时，或者想要替换组件时，可以直接删除或替换整个目录；
工程化要解决哪些问题
- 合理的开发流程及开发规范，包括代码规范、模块化组件化规范（分治）等，提高生产力
- 一套自动化代码质量检测方案，比如说eslint（提高系统可靠性）
- 一套自动化及高度适应性的项目 发布 ／ 部署 方案（提高系统的伸缩性和灵活性）
- 性能优化，包括减少冗余的接口请求及资源请求、提高缓存命中率等，简而言之就是站点的打开及运行速度（更好的用户体验）
案例分析：
- 最基本的资源合并，我们应该采取哪种策略？全部打包成一个还是分开打包？如何最高效地利用缓存？如何在降低请求数的同时提高缓存利用率？移动终端又应该采取哪种策略？
一些前端的经验
- 前端开发应该自成体系（包括构建、部署及前端运维），不应该和后端项目耦合在一起
- 避免“大而全”的重量级框架，一个框架真的满足不了所有的业务场景。项目多了，我们又不想为每个新项目重新造一遍轮子
- 新的前端技术（React、Vue、Angular2等）和工具（Grunt/gulp、webpack、Babel等）不断涌现、迭代，新技术选型应避免“改头换面”式重构。
- 工程化设计要合理分层且相互独立，随时应对新需求和技术的变化，任何一层能够低成本被替换、淘汰。