小程序代码压缩实践 (2)

其实跟 HTML 类似的标签语言,我们可以通过现有的 HTML 压缩库来对其进行压缩。这里我们可以用 gulp-htmlmin 。

const htmlmin = require(\'gulp-htmlmin\') task(\'wxml\', function () { return src(\'dist/**/*.wxml\').pipe(htmlmin({ caseSensitive: true, // 大小写敏感 removeComments: true, // 删除 HTML 注释 keepClosingSlash: true, // 单标签上保留斜线 collapseWhitespace: true,// 压缩 HTML ignoreCustomFragments: [ /<input([\s\S]*?)<\/input>/ ], })).pipe(dest(\'dist/\')) })

用来压缩 taro 的 base.wxml 文件时会报错,原因是 <input></input> 标签被压缩成 <input> 了,小程序 input 标签必须要有斜杠结尾,否则会报错。因此,我们在 ignoreCustomFragments 通过设置正则排除掉 <input></input> 这种情况。

.json 压缩

要压缩 json 文件,最简单的方法是直接 JSON.parse(JSON.stringify(\'jsonString\')) ,既然我们用了 gulp ,那就用第三方库 gulp-jsonminify 吧,方便维护。

const jsonminify = require(\'gulp-jsonminify\') task(\'json\', function () { return src(\'dist/**/*.json\') .pipe(jsonminify()) .pipe(dest(\'dist/\')) }) 图片压缩

一般情况下第三方框架都会有对图片进行压缩处理的,如果是小程序原生的项目,可以安装 gulp-imagemin 对图片进行压缩。

const imagemin = require(\'gulp-imagemin\') task(\'json\', function () { return src(\'dist/*\') .pipe(jsonminify()) .pipe(dest(\'dist/\')) }) 代码层

微信开发者工具自带的代码分析工具,我们可以很直观地知道哪个文件夹、哪个文件比较大,分析后专门对比较大的文件进行优化即可。

小程序代码压缩实践

替换较小第三方库

有些第三方包是可以替换的,比如早期常用的 moment.js 可用 dayjs 替换,只需要做一些转化,体积能减少将近 40K。再比如加解密用的 crypto-js,我们通常只用到其中部分模块,旧版本 wepy 是没有做 tree-shaking 的,需要手动移除无用模块。还有些第三方库,项目中只用到其中一些简单的功能,大可自行写一个,不必使用第三方库。

样式引入方式更改

通过分析打包后的 .wxss 文件,发现 wepy 编译压缩 less 样式时,less 会将 @import 引用的文件直接编译进来,造成文件体积的增大,比如

/* a.less */ .a{ color: red; } /* b.less */ @imoprt \'a.less\'; .b{ color: black; } /* output: b.wxss */ .a{ color: red; } .b{ color: black; }

要解决这个问题,只需改成 [@import (css)](https://lesscss.org/features/#import-atrules-feature)

/* b.less */ @imoprt (css) \'a.less\'; .b{ color: black; } /* output: b.wxss */ @import \'a.wxss\'; .b{ color: black; }

改完这个,估计项目体积又减少了 200K 左右。在改的时候页面众多,要进行更改,比较合理的做法是通过正则表达式进行全局替换。还可能涉及到批量重命名文件后缀,由于不同的编辑器和操作系统不同,就不展开说了。

删减无关配置

删除某个页面或者模块后,记得同时删除其页面配置路径。由于 wepy 会根据页面路径配置去生成页面,如果页面已删除,页面配置 pages 中的路径没删除,执行 build 打包后它会自动生成一个空白的基础页面。

简化文件层级

这个其实既是文件层亦是代码层,原因是,如果你的文件层级越多,在引入的时候路径就越长,占用的字节数就会越多。如果有上百处引用的化,还是挺占体积的。

字体图标提取

分析样式文件还发现一个问题,就是存在比较多的零散的字体图标,其使用方式是通过 @font-face 以字体 base64 的形式进行引入。这样做的好处是图标不会失真,存放在样式中页面样式加载完成即可显示,不好的地方是不方便管理,不好复用。要解决这个问题常用的方法是使用第三方的 UI 组件库,一般成熟的组件库都会有配套的图标组件,还有一种做法是自行在阿里图标网站新建一个图标目录将用到的字体图标上传上去,然后通过阿里图标网站生成字体图标文件,将文件下载下来放到服务器存着,用的时候使用链接引入就好。当然,为了方便管理最好是在本地写脚本去自动执行下载和上传,同时做版本管理方便后续维护更新。

总结

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zzwxfd.html