对于众多互联网产品,Web前端开发扮演着越来越重要的角色。随着项目规模越来越大,Web前端项目的开发规模随之增大,性能要求越来越高,业务需求变更越来越频繁,迭代周期越来越短,与后端耦合更大等问题逐渐凸显。企业项目中,最原始的一个HTML页面对应自己的CSS,JavaScript文件的模式已经不能适应这样高的开发效率了。为了提高工作效率,各种各样前端工程化技术层出不穷,然而各个技术工具有着其各自的适合场景,如何将这些技术和工具结合起来服务于自己的项目成为任何一个项目至关重要的问题,因为这些选择决定了项目的代码组织方式,开发方式,决定了项目的开发效率和质量。本文研究的百度糯米wap（http://m.nuomi.com）前端项目是百度糯米的移动端官网,包括了百度糯米的首页,搜索结果页,频道页,商户详情页、团单详情页、个人中心页等页面。团购产品之间的市场竞争激烈,新功能的开发和页面的改版需求较为频繁,并且整个产品的总体风格统一,通常多个页面的页面元素展示内容、样式结构、功能都相同。为了解决上述问题,百度糯米wap前端项目基于前端工程化的多种技术方案,搭建了一套项目架构,来提升开发效率,保证产品质量,优化页面性能。系统使用了 Gulp作为自动化构建工具组织项目开发或发布时的构建任务,使用webpack打包所有的页面资源,以便开发者模块化管理开发资源,使用less作为CSS的预处理器简化开发者的开发工作,使用crox作为模板提高了模板的复用率。在业务逻辑层面,将各个页面元素组件化以便复用,并针对页面实际需求进行了系统优化。本文将对百度糯米wap前端项目进行分析,从实际项目需求出发,分析系统如何应用各种前端工程化技术及工具进行项目的搭建,以及基于此架构的页面功能实现方式和对系统做的优化。本项目迭代进行,各个页面功能在线上运行良好,并且从开发者角度,整个系统具有良好的可扩展性,易维护性,可复用性,在保证了整个系统页面的性能的同时,大大提升了前端开发的效率。