React-native 优化之离线H5存储（Web优化之离线包）

待我称王封你为后i 2022-09-04 11:58 213阅读 0赞

> **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 启动流程图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h6eE9ubGluZU9r_size_16_color_FFFFFF_t_70][]

*  APP 中页面跳转流程图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h6eE9ubGluZU9r_size_16_color_FFFFFF_t_70 1][]

# 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`端,故登录态没有详述.这个也不难,读者自己思考即可.

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h6eE9ubGluZU9r_size_16_color_FFFFFF_t_70]: /images/20220829/e927c3a6aeac4c84b9b71bfae1679ab8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h6eE9ubGluZU9r_size_16_color_FFFFFF_t_70 1]: /images/20220829/4de4104d3eb9473797baaeb00a5acbba.png