关于web:Web优化之离线包

作者：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. 结束语

❤️ 关注 + 点赞 + 珍藏 + 评论 + 转发 ❤️
原创不易，激励笔者创作更好的文章~