You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
let top20 = sortList.sort((a,b)=>{return b[1] - a[1]}).slice(0, 20).map(i=>i[0])
let keyMap = 'abcdefghijklmnopqrstuvwxyz';
const pat = new RegExp(`(${top20.join('|')})`, 'g')
// 替换字符串
str = str.replace(pat, (hit)=>{
let index = top20.indexOf(hit);
return keyMap.charAt(index);
})
压缩后的文本看起来是这样的
let region = [{"R":"北京","E":[{"R":"北京c","E":[{"R":"pjb"},{"R":"tjb"},{"R":"朝lb"},{"R":"丰台b"},{"R":"石景gb"},{"R":"海淀b"},{"R":"门头沟b"},{"R":"房gb"},{"R":"通kb"},{"R":"顺义b"},{"R":"昌qb"},{"R":"大兴b"},{"R":"怀柔b"},{"R":"q谷b"},{"R":"密云b"},{"R":"延庆b"},{"R":"deb"}]}]},{"R":"天津","E":[{"R":"天津c","E":[{"R":"和qb"},{"R":"spb"},{"R":"stb"},{"R":"o开b"},{"R":"s北b"},{"R":"红桥b"},{"R":"p丽b"}, ...]
替换后的文本是56kb,体积再次减少了 17%。
文本解析
在进行了字典压缩文本之后,使用时还需要解析,再次利用提取出的字段:
let pat = new RegExp(`(${Object.keys(top20).join('|')})`, 'g')
function getRegion() {
let data = null;
try {
data = JSON.parse(JSON.stringify(region).replace(pat, (hit)=>{
return top20[hit];
}))
} catch (error) {
throw new Error(error);
}
return data
}
缘起
昨天接手了一个小程序,让新增一些页面。页面写完,预览失败。为啥?大小超过2M了。虽然说小程序目前支持分包的方式让上限提高到4M,但是考虑到业务的发展,还是先优化一波。
去掉无用数据
优化体积,从大文件下手,首先找到的大文件,就是
address.js
, 体积颇大,足有 145kb 。我们看看他。通过调用的页面发现,数据中的
code
字段是没有被使用的,先全文替换为空字符串。替换后,体积变为了 90KB, 直接减少了 38% 的体积
缩短变量名
去掉code字段之后,体积确实少了很多,但是还需要进一步优化,把长的变量名改短,看看能减少多少体积?
现在的体积是 68kb,仅仅是通过修改变量名,又减少了 24% 的体积。
数据字典
到了现在,还能减少吗?当然能,变量名可以缩短,汉字字符串可以提取相同的部分,作为数据字典。先统计一下那些字出现概率最高:
统计完毕之后,做一次全局的文本替换
压缩后的文本看起来是这样的
替换后的文本是56kb,体积再次减少了 17%。
文本解析
在进行了字典压缩文本之后,使用时还需要解析,再次利用提取出的字段:
经过测试,解析耗时 5ms左右, 在可以承受的范围。
经过不懈努力,终于把这个文件从最初的145kb,减少了到现在的56kb,一共减少了61% 的文件大小。
可以看出,压缩虽然有效,但是收益最大的操作还是去掉无用的字段。顺着这个思路,接下来继续对图片进行优化。
example
本文demo在这里 小程序体积优化(1)--优化大文件 demo
The text was updated successfully, but these errors were encountered: