置顶【分享】小程序静态资源打包方案精选热门

01-31

1688浏览

0评论

使用 brotli 算法打包和压缩资源文件

解决问题

小程序/小游戏由于受到包体积限制，因此一些体积较大的本地资源可考虑以压缩的格式进行存储，尤其是压缩率高、解压快的 brotli 格式。

微信小程序现已提供原生解压 brotli 压缩文件的能力，但其他小程序目前不支持该 API，因此需要一个兼容方案。

此外，开发者有时希望将多个文件打包成一个资源包，方便使用并能提升压缩率，因此需要记录额外的文件信息。

本工具主要解决上述问题。

兼容方案

目前大部分小程序都支持加载 brotli 压缩后的 wasm 文件，因此开发者可将静态资源打包成一个只有数据段的 wasm 文件，并进行压缩；运行时直接加载 .wasm.br 文件，即可从导出对象的内存中读取原始数据。

文件打包

安装 mini-program-pack 工具：

npm i -g mini-program-pack

演示：

echo "Hello" > t1.txt
echo "abc123" > t2.txt

mini-program-pack --binary t1.txt t2.txt -o res.wasm.br

将 t1.txt 和 t2.txt 以二进制格式打包压缩，生成 res.wasm.br。

该 wasm 文件不包含任何指令，仅用作数据载体而已。

文件读取

小程序项目中安装 mini-program-unpack 库：

npm i mini-program-unpack

运行：

import unpack from 'mini-program-unpack'

unpack('res.wasm.br').then(pkg => {
  console.log(pkg.files)          // ["t1.txt", "t2.txt"]
  console.log(pkg.read('t1.txt')) // Uint8Array(6) [72, 101, 108, 108, 111, 10]
  console.log(pkg.read('t2.txt')) // Uint8Array(7) [97, 98, 99, 49, 50, 51, 10]
})

解压过程是后台异步执行的，不会阻塞主线程。

在支持原生 brotli 解压的环境中，程序不会调用 wasm 接口，而是直接解压 .wasm.br 文件，然后跳过 wasm 文件头，因此可快 10% 左右。

文本优化

由于小程序不支持 TextDecoder 等二进制转文本的 API，因此开发者只能自己实现 UTF-8 解码，这不仅需要额外的代码，而且性能很低。

为此本工具提供了文本模式，可大幅提升文本读取性能。打包时通过 --text 指定使用文本模式的文件：

echo "Hello" > t1.txt
echo "abc123" > t2.txt
echo "你好😁" > t3.txt

mini-program-pack --binary t1.txt --text t2.txt t3.txt -o res.wasm.br

读取文本文件，返回的是 string 类型：

unpack('res.wasm.br').then(pkg => {
  console.log(pkg.files)          // ["t1.txt", "t2.txt", "t3.txt"]
  console.log(pkg.read('t1.txt')) // Uint8Array(6) [72, 101, 108, 108, 111, 10]
  console.log(pkg.read('t2.txt')) // "abc123\n"
  console.log(pkg.read('t3.txt')) // "你好😁\n"
})