组件化和工程化是前端发展到一定阶段的产物，当模块化满足不了某个阶段的开发需求时，组件化和工程化就实现了。首先需要回顾一下模块化的概念。模块化开发是一种管理方式，是一种生产方式，一种解决问题的方案，一个模块就是实现特定功能的文件，有了模块，我们就可以更方便地使用别人的代码，想要什么功能，就加载什么模块。
1.组件化
随着前端的不断发展，模块化已经不能满足简单的开发需求了。前端开发开始注重业务逻辑，UI和功能。在开发过程中可以按照不同的文件划分，每个文件都是一个满足某种业务逻辑，包含一定UI以及功能的相对独立的整体。这个整体放到任意一个地方使用，都具有一样的功能和样式，从而可以实现对这个整体的复用，这个就是组件化的思想。组件化设计能够增加复用性，灵活性，提高系统设计和开发效率
模块化和组件化的对比：简单来说，模块化是一个功能上的封装和复用，更多的是为了实现某些特定功能的复用，组件化则是更深一层，实现的是功能，UI，业务逻辑的整体化复用。
组件化的实现
- 分析页面的布局：先从大体上对布局进行分析，归纳出相似的样式
- 化繁为简，组件抽象：将类似的样式和高度相似的业务数据抽离出来，最终实现组件的抽象
- 差异化兼容：抽象组件之后，还需要满足通用性和可扩展性，尽可能的实现更多的兼容
总结来说，我们可以把页面当成一个拼图架子，组件就是里面的每一小块拼图，相似的拼图可以复制使用。这样下来，我们会将页面分成了一个个部分，细分的话每个部分还能接着划分；相似样式还有一个好处就是可以实现整体页面的一致性。
2.工程化
组件化实现的是页面的拼接组合，随着前端的继续发展，前端开发越来越复杂，迎来了更多的挑战和问题，前端开发在这个阶段应该需要自成体系，对开发流程，开发技术，工具等进行规范化，标准化，因此出现了前端工程化的趋势。
工程化更多指的是以软件工程的思想，对前端开发的规范化和标准化，目的是在前端项目中实现规范的开发流程，高效的多人协作，提高开发效率，减少不必要的重复工作时间，确保开发质量。工程化主要从模块化，组件化，规范化以及自动化四个方面思考。
模块化和组件化是工程化实现的基础，是工程化的小分子，当工程复杂到一定程度时，项目的规范化与否直接会影响到后期的开发质量，规范化包括目录结构，编码规范以及接口规范等。
- 目录结构规范化：目录结构的合理有助于提高项目结构的合理性，方便资源的统一定位管理
- 以antd为例，antd通过统一的目录结构，配合babel-import-plugin，实现了按需加载
- 编码规范：编码时统一html代码的语义性，统一css代码规范和js规范，统一命名规范，这样增加了项目的可维护性
- 接口规范：前后端分工明确的现在，前后端协作的关键就是接口，接口的规范化能够在前后端联调和对接过程中起到关键作用。规范先行能够避免沟通时产生的不必要问题，提高开发效率。
自动化则是更多的减轻开发的工作量，能机器实现的尽可能少的人工实现，比如项目的集成，构建，打包和部署，项目的自动化测试等。
总结
随着前端的不断发展，以后前端还会出现更多的设计思想，需要不断学习不断进步，好好努力，好好加油