▲ 我的PLUS页
选型之坑旧版采用的是前端开发静态页面，后端再套页面的开发模式，在这种模式下前端人员可发挥的空间受到了很大制约，也给后期的维护和二次开发工作带来了麻烦。于是，此次改版我们提出采用前后端分离模式开发，以明确前后端权责、提高开发效率，同时提高后期可维护性，这一方案得到了后端团队的支持。而难点在于这次是改版，并不是完全从零开始，所以一旦前后端分离，之前在view层面的很多业务逻辑就也要拿到前端来做，而我们团队作为一个公共部门并不熟悉他们的业务，这无疑进一步增加了我们的压力。
我们在前端采用了目前比较流行的 Vue.js 2.0 开发框架，脚手架工具和之前开发的很多项目一样，仍然选择了京东前端自己开发的 JDF，而当时的 JDF 版本尚不支持解析 Vue 模板文件，所以我们使用了 Vue.js 的独立构建模式，也就是在页面上直接引入完整版的 Vue.js 文件（包含模板编译器），模板的编译在浏览器端完成，后来发现这给我们挖了个大坑。
▲ Vue.js的不同构建版本
项目测试阶段发现，iOS版京东APP 频道首页的打开速度明显慢于其他浏览器和 APP，每次进入页面都会首先渲染出 loading 浮层，之后3-4秒才渲染出页面的楼层。我们马上开始排查。在 APP 中调试还是比较困难的，而在调试方便的浏览器中又不存在这个问题，所以这个问题的排查，我们还真是下了一番功夫。
我们初步判断这不是常规的因为请求多、资源数据量大、JS逻辑等原因造成的问题，因为这些问题一旦存在必然影响不止一个浏览器，且通过浏览器性能监控并未发现明显异常情况。
我们和测试团队利用抓包工具对 iOS版京东APP 中这个页面的资源请求情况进行了监测（这个阶段我们还踩了iOS 10.3 版本 https 请求抓包的坑，下文细说），也没有发现明显异常，基本印证了我们的判断。
另一方面，我们发现同一部 iPhone 的 Safari 浏览器和京东金融、微信、手机QQ等 APP 中页面加载速度都明显快于 iOS版京东APP，所以我们把关注点放到了 iOS版京东APP 内置的浏览器组件上，经过深入调查及与APP团队沟通，我们了解到 iOS版京东APP 使用的是比较老的 UIWebView。
苹果公司在 iOS8 之后提供了替代 UIWebView 的 WKWebView，较 UIWebView 在性能、稳定性、功能方面有大幅提升，目前主流 iOS APP 大部分都在使用或已经迁移到 WKWebView。
▲ 苹果官方从 iOS8 开始就建议不再使用 UIWebView
所以我们判断频道首页在 iOS版京东APP 中加载速度慢的原因是：性能低下的 UIWebView 在编译逻辑复杂的频道首页 Vue.js 模板时耗时过多。那么，怎么解决这个问题呢？等待 APP 升级 WKWebview 明显解决不了燃眉之急。要解决当下的问题还得从页面自身入手。我们计划尝试把模板编译工作拿到本地来做，减轻浏览器负担。
我们基于 webpack 搭建了一套新的脚手架，使用 Vue.js 官方提供的 Vue-template-loader 在本地 nodejs 环境对页面 Vue 模板进行了预编译，把模板文件提前编译成了 JavaScript 渲染函数。频道首页在新的脚手架跑通之后，我们在 iOS版京东APP 中测试了一下，页面渲染速度大幅提升，随后我们把整个项目都迁移到了新的脚手架中，问题得以彻底解决。
来，感受一下。
