一、前言
去年12月份开启了一个新项目--在线抓娃娃，就是让用户可以通过app去控制我们机房中的娃娃机来抓取娃娃。本项目开发半个月就紧急上线第一版本，中间经过2次大版本迭代，一个月不到就做到用户量超过10w+，后面也算做到了市场中的前三。这个项目也算是某个点间的红利，当我们决定做这个之前，市面上只有一两家产品，一个月之后，市面上就疯狂的出现了50多家，到如今应该有超过300多家了。
我先从非技术角度去看待这种模式的app：
1、新鲜的玩法，短期可以吸引大量用户；
2、让用户足不出户就可以抓娃娃，满足一些喜欢抓娃娃人群的诉求；
3、用户留存率低，一般用户就是在获取免费金币进来玩一把，然后就不会再来了，所以还得通过各种手段吸引用户来，提高付费率；
4、需软硬件结合，打通之后还需专门人员维护机器；
5、需要仓储、物流等各方面，没有这方面经验的team可能会踩很多坑；
结合这个项目，说一说我在前端部分的工作，以及后面遇到的坑，以及填坑之路，后续项目有什么心得的也会慢慢添加进来；
二、前端负责的工作
技术栈：ES6 + vue + webpack
实现模块：个人中心 + 产品详情中心 + 客服反馈模块 + 发货模块 + 订单管理 + h5支付 + 渠道推广（邀请码） + 仿造app的h5站点 + 小程序为公众号引流
说明：
1、 h5支付一种使用app里面h5生成支付订单，然后调用后台原生支付；app外的支付常用微信支付提供的API;
2、 仿造app的h5站点能实现app的大部分功能，包括抓娃娃操作等；
3、 小程序为公众号引流是临时加班开发一版拜年小程序，对页面进行跳转客服中心埋点，自动回复公众号的文章链接，进入即有关注入口（真是套路无处不在啊~）；
三、采坑之路
1、代码快速迭代引发发布冲突问题；
开始采用的是非覆盖式的版本管理方式，然后后面发布代码就特别头疼，要修改某个功能模块，导致公共的manifest文件变动，发布到线上就会影响到其他页面；可能开始技术选型没有做好，后面只能中途改用非覆盖式的版本管理方式；
对于项目构建这一块，我们前端组也在一直摸索，旧项目我们采用的php模板 + gulp +JQ，我们版本管理是使用费覆盖的形式，就是每次静态文件更新，就在用gulp在编译的时候自动添加版本号就ok了；
后面新项目在构建时候就采用了webpack + vue + ejs,当然后台还是php提供接口支持，期初我们还是把旧项目的版本管理方式移植过来，后面就慢慢曝露这种实现方式的问题；进而修改为非覆盖式的方式；
开始我们采用的是开发环境编译，最后把所有代码都提交到服务器，这样也是可以的，但是提交太多。最后改成服务端编译，但是这个又暴露出一个问题，为了要保持本地环境和服务环境一样，我们要同时维护两个环境保持一致。
现在打算用集成开发模式，单独一台编译服务器，用gitLab及时触发并同步起来。目前正在进行中。。。
2、打包问题
由于路由页面比较多，引用模块文件可能比较大，尽可能讲js代码打包成小块，使用require.ensure按需加载等；
3、首屏白屏问题
添加各种零星优化方案之后，loading、减小代码体积、合并接口、cdn加速缓存。。。首屏还是会有可能白屏情况；
找了几种实现方案，但是还是没有添加进去
（1）做个资源预加载，将你的项目分好模块，分批次进行预加载。
（2）使用骨架屏，刷微博时候，如果网页出来比较慢，显示可以看到一个骨架图占位；《为vue项目添加骨架屏》
（3）vue-ssr，做成服务端渲染，具体还看实际情况吧。