作者：iplaycodex
仓库：github、codePen
博客：掘金、segmentfault、知乎、简书、博客园
公众号：FEZONE(大写)
分割我：iplaycodex@163.com
特地申明：原创不易，未经受权不得对此文章进行转载或剽窃，否则按侵权解决，如需转载或开明公众号白名单可分割我，尊重原创尊重知识产权从我做起
1. 写在后面
当初混合开发的利用场景越来越多了.业内的解决方案也有很多,例:native + react-native的,支付宝或者微信的native + 小程序的.当然利用更多的还是native + webView这种场景.
应用native + webView的长处很多:
- 开发不便
- 不便疾速迭代
- ...
然而应用这套计划也有一个很致命的毛病:那就是很慢!,在native上点击了一个按钮触发一个关上webView的action操作,会通过以下几个过程:
初始化webview => 申请HTML,JS,CSS等动态资源 => 渲染模板 => 申请API
这两头的工夫很久.通过测试咱们我的项目在安卓低端机上体现为均匀加载实现工夫为 4 ~ 5 秒.这是十分难以承受的!所以优化的需要就火烧眉毛了.
优化的中央很多,本篇先介绍一下资源动态化!
- 应用动态化会将
HTML和CSS以及JS保留在 APP 的沙盒中.当须要关上h5页面的时候间接从沙盒中通过file:读取,如此速度会大大晋升!简直能够做到近秒开.晋升非常明显.
2. 如何做?
参见上面的 2 个流程图:
- APP 启动流程图
- APP 中页面跳转流程图
3. 注意事项:
3.1. 登录态等数据存取应用cookie
3.2. 外链必须注明申请协定.例:https:
因为在内置包环境,关上html应用的是file:协定,故所有外链都必须写明资源协定,否则默认为file:.例:
//bad<script src="//baidu.com/jquery.js"></script>//good<script src="https://baidu.com/jquery.js"></script>3.3. 页面跳转
模块内的页面跳转应用vue-router来实现,此处不再赘述.而模块间的页面跳转则须要应用 全门路.例:
<button @click="pushToOtherModule">跳转到其余模块</button>methods:{ pushToOtherModule(){ // pushToOtherModule window.location.href = "http://baidu.com/web/h5/other/index.html#/goods/1"; }}3.4. 跨域
应用file:协定加载html会导致跨域问题.该问题通过运维配置nginx已解决
3.5. 打包优化
webpack的图片解决,字体解决,以及dllPlugin,treeshaking等此处不在赘述.具体参见官网文档.
4. 名词解释
4.1. 内置包降级
通过npm打包成zip包上传后盾即可
4.2. 开关
通过开关能够不便管制APP走内置包还是走服务器,不便一键切换
4.3. 白名单
白名单的作用是用来映射URL,即当用户触发一个URL全链接跳转的申请时,APP会进行拦挡.通过匹配白名单,即可晓得指标页面是走内置包还是走HTTP申请.
大抵的思路目前就是这样,实现起来也不是很难.对于性能晋升却是质的飞跃,所以强烈推荐.此文档登录态保护在APP端,故登录态没有详述.这个也不难,读者本人思考即可.
5. 结束语
❤️ 关注 + 点赞 + 珍藏 + 评论 + 转发 ❤️
原创不易，激励笔者创作更好的文章~