Controlling complexity is the essence of computer programming.
随着前端开发复杂度的日益提升，组件化开发应运而生，并随着 FIS、React 等优秀框架的出现遍地开花。这一过程同样发生在美团，面临业务规模的快速发展和工程师团队的不断扩张，美团历经引入组件化解决资源整合问题、逐步增强组件功能促进开发效率、重新打造新一代组件化方案适应全栈开发和共享共建等阶段，努力“controlling complexity”。本文将介绍美团组件化开发的实践过程。

组件化 1.0：资源重组
在美团早期，前端资源是按照页面或者类似业务页面集合的形式进行组织的。例如 order.js 对应订单相关页面的交互，account.css 对应账户相关页面的样式。这种方式在过去的较长一段时间内，持续支撑了整个项目的正常推进，功勋卓著。

随着业务规模的增加和开发团队的扩张，这套机制逐渐显示出它的一些不足：

1.资源冗余

页面的逐渐增加，交互的逐渐复杂化，导致对应的 css 和 js 都有大幅度增长，进而出现为了依赖某个 js 中的一个函数，需要加载整个模块，或者为了使用某个 css 中的部分样式依赖整个 css，冗余资源较多

2.对应关系不直观

没有显而易见的对应规则，导致的一个问题是修改某个业务模块的 css 或者 js 时，几乎只能依靠 grep。靠人来维护页面模块 html、css 和 js 之间的依赖关系，容易犯错，常常出现内容已经删除但是 css 或 js 还存在的问题。

3.难于单米测试

以页面为最小粒度进行资源整合，不同功能的业务模块相互影响，复杂度太高，自动化测试难以推进。
2013 年开始，在调研了 FIS、BEM 等方案之后，结合美团开发框架的实际，美团初步实现了一套轻量级的组件化开发方案。主要的改进是：

1.以页面功能组件为单位聚合前端资源
2.自动加载符合约定的 css、js 资源
3.将业务数据到渲染数据的转换过程独立出来