React-native 优化之离线H5存储（Web优化之离线包）_react native 本地数据库离线存储数据后怎么查询-CSDN博客

本文介绍了在混合开发中如何通过资源静态化优化H5页面加载速度，以解决native+webView方案的延迟问题。通过将HTML、CSS和JS保存在APP沙盒中，实现近秒开的加载效果。关键步骤包括设置UMI配置、处理外链协议、注意页面跳转方式和处理跨域问题。同时，提到了内置包升级、开关控制及白名单等实施细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

PS: 补充，在某些umi框架的umirc.js里，设置了base属性以及publicpath属性，并无法打包出H5离线包，通过观察，发现正常能打离线包的项目路径携带hash锚点（#），而无法打离线包的则不携带锚点（#），通过查询资料，发现是hash属性不匹配新版本的umi，需要改成history

// hash: true,
  history: { type: 'hash' },

import { defineConfig } from 'umi';
// import postcss from 'postcss-px2rem-exclude';

export default defineConfig({
  // hash: true,
  history: { type: 'hash' },
  manifest: {},
  title: '课程学习记录',
  define: {
    __HOST: 'https://xxxx.xxxx.com.cn',
    SECRETKEY: 'AgUCiqwqQg',
    SYSID: '1001',
    PERMIT: 'nGdeacZmW3E1XM9Wi5alwcMUCKeVDZ',
    APIHOST: 'https://xxxx.xxxx.com.cn',
    APPID: 'bfea7b9d-28df-4ce9-934a-a8f755c2a111',
  },
  nodeModulesTransform: {
    type: 'none',
  },
  routes: [
    { path: '/', component: '@/pages/index' },
    { path: '/allcourse', component: '@/pages/allcourse' },
  ],
  base: './',
  publicPath: './',
  fastRefresh: {},
  targets: { chrome: 49, firefox: 45, safari: 7, edge: 13, ios: 7, ie: 11 },
  // chainWebpack(config, { webpack }) {
  //   config.plugin('monaco-editor').use(postcss);
  // },
});

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";
    }
}