欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

微信小程序使用pako.js的踩坑笔记

程序员文章站 2022-06-21 10:18:55
问题 今天组长跟我们讨论了个问题,说是文章存储占用有点大,消耗宽带流量费,让我看看能不能找个方法解决一下(文章存储的是html字符串)。第一反应是没什么头绪,能想到的就是将相同的字符串替换成一个标识之类的,小程序再通过标识替换回原本的字符(感觉就不是很靠谱...)。 后来发现真的不靠谱,首先每篇文章 ......

问题

  今天组长跟我们讨论了个问题,说是文章存储占用有点大,消耗宽带流量费,让我看看能不能找个方法解决一下(文章存储的是html字符串)。第一反应是没什么头绪,能想到的就是将相同的字符串替换成一个标识之类的,小程序再通过标识替换回原本的字符(感觉就不是很靠谱...)。

  后来发现真的不靠谱,首先每篇文章样式可能都不一样,需要很多对应的字典,即使是这样大概预估了下,也减少不过10多k左右。唉,还是面向百度编程吧,看看有没有什么别人写好的模块可以用一下。

  然后就找到了pako.js,具体实现是本地gzip压缩成base64。我在pc端稍微测试了下,原本150k左右的文章,能够压缩到14k,压缩率90%。嗯,不错,开始搞一下。可后面的路并没有我想的那么顺畅...

准备工作

  要是用第三方模块,肯定需要npm包管理工具是吧。npm init,然后npm i pako,一顿操作,引入文件测试。哦豁,报错找不到这个包。因为在公司一直都是用的原生小程序语法开发,没使用过三方模块,所以这方面一直没去了解,还以为和web端的差不多。没事嘛,面向百度编程。百度了一堆乱七八糟的,都没什么作用,还是乖乖的看官方文档吧,没想到几分钟的事就解决了(有时候还是文档靠谱)。

  1. npm init  创建package.json
  2. npm i pako
  3. 开发者工具左上角 -> 工具 -> 构建npm
  4. 开发者工具右上角 -> 勾选使用npm模块
  5. 文件中引入模块使用

  附上文档链接:

开始踩坑

   数据库存储的文章已经压缩过,现在要做的就是在小程序解压缩还原成html字符串并渲染出来。

  封装一个解压缩的函数(里面用到的方法都是pako写好的,直接调用),代码:

 1 var pako = require('pako');
 2 
 3 page({
 4    ...
 5    unzip(b64data){
 6     let strdata = atob(b64data),
 7         chardata = strdata.split('').map(function(x){return x.charcodeat(0);}),
 8         bindata = new uint8array(chardata),
 9         data = pako.inflate(bindata);
10     strdata = string.fromcharcode.apply(null, new uint16array(data));
11     return decodeuricomponent(strdata)
12    }
13 })        

  然后将接口拿到的文章传入到 unzip 中就可以解压出来了。当然这只是我预期的结果(因为web端这样的操作确实可行)

  真机调试后小程序报错,找不到atob

  微信小程序使用pako.js的踩坑笔记

  原因是pako方法中使用到window.atob,而小程序不支持这个方法,所以导致报错。

  解决方法:引入atob的polyfill,就是在小程序实现一个atob方法

  atob polyfill 下载地址:https://github.com/davidchambers/base64.js

1 const polyfill = require('../../utils/base64')
2 const {atob} = polyfill;

  引入atob后,再跑一遍真机测试,诶,舒服了,完美的展示出来,而且响应速度和原本的没有什么差别

 

  然后我以为完成任务了,在测试一篇稍微大点的文章时(260k左右),小程序再次报错

  微信小程序使用pako.js的踩坑笔记

  而且居然是调用栈内存溢出。wtf?!初步我还以为自己逻辑写错,导致出现递归死循环之类的。检查几遍后,并没有发现错误。只能再次求助百度...

  得到的原因是因为数据量过大,导致在进行 string.fromcharcode.apply(null, new uint16array(data)) 时,出现栈内存溢出的问题,用以下的函数代替这步即可:

 1 function handlecodepoints(array) {
 2     var chunk_size = 0x8000; // arbitrary number here, not too small, not too big
 3     var index = 0;
 4     var length = array.length;
 5     var result = '';
 6     var slice;
 7     var arr = [];
 8     for (var i = 0, _i = array.length; i < _i; i++) {
 9         arr[i] = array[i];
10     }
11     while (index < length) {
12         slice = arr.slice(index, math.min(index + chunk_size, length)); // `math.min` is not really necessary here i think
13         result += string.fromcharcode.apply(null, slice);
14         index += chunk_size;
15     }
16     return result;
17 }

写在最后

  后面测试过程中并未出现其他问题,测试了更大的数据量后也没什么问题。至此,我在小程序使用pako.js之路告一段落。之后如果还有存在问题,我会继续更新这篇文章。若你在使用过程中发现其他问题,请告诉我。