最近一直在使用ionic2开发app,遇到了很多问题,大多能从ionic论坛或者stackoverflow找到解决方案,实在没有还能直接去github给ionic团队提issue,但是有个问题困扰了我很久,在app上线后收到用户反馈启动时间太久了,我很快找到了解决方案,ionic提供生产环境的打包方式,但我很快又遇到了个问题并且很长一段时间内无从下手,就是使用--prod打包后,进入app会白屏,并且是永远白屏,我在最开始的思路一直是以为我的ionic当前版本太低了,当我抽出两天时间升级ionic后,解决一系列因为版本升级带来的问题后,白屏问题依然存在...........
于是,我转换思路,开始从自身找问题.初期,很理所当然的认为开发模式没有错误的话,换种打包方式的生产环境是不可能报错的,然而在很多次调试过程中我发现,往往报错的表现形式是白屏,那么会不会在生产环境时会自动屏蔽这些错误,查阅ionic2的issue list后发现,在app中,编译错误是不会直接显示的,所以好像显的编译很成功,详情见这里.
扯了一大堆心路历程,干货来了,这个问题为什么会困扰我这么久,就是因为我看不到生产环境的错误输出,所以没办法定位错误在哪,也导致每个遇到白屏的攻城狮都有可能是不一样的问题导致,所以就很明了了,我们只要能够想办法输出错误信息,就能定位错误,从而解决这个问题了.
那么问题又来了,既然xcode和android studio显示不了错误,那怎么解决呢,查阅很多资料,突然想到很久以前用过Safari调试app,具体步骤如下：
1.Run ionic build ios --prod
2.Run ionic emulate ios
3.Open Safari-> Develop -> Simulator -> index.html (for your app)
4.Check console for errors (if any)
5.Press reload (usually on top left) and monitor the console tab for errors.
Safari如我预期打印出了错误log,很成功的定位到了错误,一个第三方组建引用了不存在的文件,解决完就完美解决了白屏问题,iphone6s plus启动速度从6秒左右提升至2秒左右.