浅淡iOS app加载h5页面

Posted 2023-03-24

参考技术A

由于目前的工作中，原生app大量嵌入h5页面，很多的功能需要h5来实现，但是由于h5需要从网络加载，在弱网状态或者请求资源大的时候必然出现白屏，再网上搜索后发现并没有一个通用的解决方案，其中VasSonic(手Q的解决方案)侵入性太大，需要整个框架更换成本太大，经过一段时间的实践特总结优化的思路。

从上边的测试很明显可以证实我们的猜测

针对上边的问题我们进行了测试，通过先加载 h5项目的一个页面 再加载真正要展示的页面时间发现第二次加载时并没有load->start的耗时，甚至先加载 about:blank 也没有这个耗时，所以基本找到了问题。
我们解决做法是做了一个webview的复用池(当然如果项目中同时只有一个webview存在时可以做成单例)，在加载闪屏页时进行初始化并加载url(我们项目是vue写的目前是加载一个vue的空白页，其实如果没有做静态资源拦截加载空白页面就好，这个防止网络错误的问题), 在需要展示的地方能过js(location.hash来改变路由或者bridge)来跳转页面。

但是由于我们用的webview是wkwebview也就有post请求body丢失的问题目前网上没有可行的解决方案， VasSonic上也是用的uiwebview，项目因为有很多的h5如果换回uiwebveiw会有很多的问题，并且uiwebview性能比较低，占的内存也很大，本身准备放弃，但是在部门老大的提示下，找到了绕过的方案

由于静态资源都是get请求，这样就绕过了post丢失body体的问题

针对这个问题，我们的解决办法是，h5也按版本更新，在app启动的时候与服务器比对是否需要更新静态资源，并且判断当前版本下h5可以访问的最新版本，当更新完成后提示用户然后刷新页面，如果未更新未完成依旧使用旧版本。

由于我们的项目主要是面向b端的，要求数据一致性较高, 主要采用第1种方案进行优化

ios内嵌app加载慢

在做app内嵌的时候使用了vue 安卓加载完全没问题  ios加载要等5s左右才能进去  本着能进去就不管的精神 准备放着 

谁知道 最后在页面又加一个参数之后彻底进不去了  这下彻底不淡定了 最终面向百度编程以后找到解决办法 

发现文件打包以后会生成.map文件  由于文件加载顺序的问题 导致白屏由于使用的是cli3 

自己新建vue.config.js

设置 

productionSourceMap: false,

 

.map文件不生成 代码立马减少7m左右

 

再次加载后  一切很丝滑

 

完美解决