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

迷南。 2022-12-25 11:50 315阅读 0赞

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

## 问题[\#][Link 1] ##

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

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

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

## 准备工作[\#][Link 2] ##

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

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

附上文档链接：[https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html][https_developers.weixin.qq.com_miniprogram_dev_devtools_npm.html]

## 开始踩坑[\#][Link 3] ##

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

压缩文章代码：

1 function zip(str){
    2       let binaryString = pako.gzip(encodeURIComponent(str), { to: 'string' }),
    3           res = btoa(binaryString);
    4       return res
    5 }

封装一个解压缩的函数（里面用到的方法都是pako写好的，直接调用），代码：

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

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 })

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

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

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

[![fbe72a137c5c193cf5932493552db9bc.png][]][fbe72a137c5c193cf5932493552db9bc.png 1]

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

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

atob polyfill 下载地址：[https://github.com/davidchambers/Base64.js][https_github.com_davidchambers_Base64.js] ( 该polyfill实现了atob和btoa)

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

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

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

[![2cc64f7ad7b9518777d2970aea6390cb.png][]][2cc64f7ad7b9518777d2970aea6390cb.png 1]

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

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

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

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 }

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

## 写在最后[\#][Link 4] ##

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

[pako.js]: https://www.cnblogs.com/chanwahfung/p/11391234.html
[Link 1]: https://www.cnblogs.com/chanwahfung/p/11391234.html#2926696551
[Link 2]: https://www.cnblogs.com/chanwahfung/p/11391234.html#4003782961
[https_developers.weixin.qq.com_miniprogram_dev_devtools_npm.html]: https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html
[Link 3]: https://www.cnblogs.com/chanwahfung/p/11391234.html#128130108
[48304ba5e6f9fe08f3fa1abda7d326ab.png]: /images/20221120/a4cc55a202ba48a0ab136662b01a738e.png
[fbe72a137c5c193cf5932493552db9bc.png]: https://img-blog.csdnimg.cn/img_convert/fbe72a137c5c193cf5932493552db9bc.png
[fbe72a137c5c193cf5932493552db9bc.png 1]: https://img2018.cnblogs.com/blog/1750559/201908/1750559-20190821214648236-2105160471.png
[https_github.com_davidchambers_Base64.js]: https://github.com/davidchambers/Base64.js
[2cc64f7ad7b9518777d2970aea6390cb.png]: https://img-blog.csdnimg.cn/img_convert/2cc64f7ad7b9518777d2970aea6390cb.png
[2cc64f7ad7b9518777d2970aea6390cb.png 1]: https://img2018.cnblogs.com/blog/1750559/201908/1750559-20190821234707235-1682836199.png
[Link 4]: https://www.cnblogs.com/chanwahfung/p/11391234.html#1776102304