小程序 超大json数据处理(省市区数据等等)

在做小程序时候用的uniapp,遇到一个严重的问题.一个省市区数据300k左右,但是多个页面都用了这个数据,被多次打包的主包的运行文件内,造成总体积过大

JSON数据要求

键全部是双引号字符串

不允许有空格 (在线压缩工具,站长工具等)

不允许有注释,

 

 App.vue 中发请求获取json, 可以用datatype:json 进行转化一次

<script>
import { getPosition } from "@/api/my/resume";
import { processPosition } from "@/static/position";
import { setCityDara } from "@/static/cityData.js";
import { setCity } from "@/static/transdata";
export default {
  onLaunch: function () {
    getPosition().then((res) => {
      const { data } = res;
      if (data.code === "000000") {
        processPosition(data.list);
      }
    });
    uni.request({
      url: "https://123/data/cityData.json", //服务器地址
      dataType: "json",
      success: (res) => {
        console.log("开始赋值")
        setCityDara(res.data);
        setCity(res.data.__LocalDataCities);
      },
    });
  },
  onShow: function () {
    console.log("App Show");
  },
  onHide: function () {
    console.log("App Hide");
  },
};
</script>

 

所有数据必须以export导出let 

export let arrCity = [] //数据一

export let __LocalDataCities = [] //数据二

export function setCityDara(data) {
    arrCity = data.arrCity
    __LocalDataCities = data.__LocalDataCities
}

 

 

本身export 出去的数据是静态类型,数据可能造成差异,但是最好是在页面初始化就提前做好所有数据赋值,也可以将这些数据请求全部改为async awite方式做成同步的

MDN

被导出的绑定值依然可以在本地进行修改。在使用import进行导入时，这些绑定值只能被导入模块所读取，但在export导出模块中对这些绑定值进行修改，所修改的值也会实时地更新

inport的数据是静态的,但是在export所处的模块内给外部提供一个方法,调用方法去修改

 

起码这样你本地的数据会小很多,以后的每次请求,服务器设置了缓存,还可以将这些大json保存在本地,下次再使用,就直接提取本地文件