lottie 压缩指北

[geeeger]

web使用lottie动画，其json源代码是可以压缩的，此处我们可以摒弃或混淆以下内容

• 元件的nm字段(渲染不需要该字段)
• 元件的mn字段（渲染不需要该字段）
• 元件的id字段可混淆(渲染仅需要引用)
• 元件的refId字段可混淆(渲染仅需要引用)

基于此种思想，可以实现

const json = require('./test.json')
const fs = require('fs')
let result = []
const max = 122
const min = 97
let start2 = min
const idmap = { 
}
function walker(obj) {
    if (typeof obj !== 'object') {
        return;
    }
    for (const key in obj) {
        switch (key) {
            case 'nm':
            case 'mn':
                delete obj[key]
                break
            case 'id':
            case 'refId':
                if (!idmap[obj[key]]) {
                    let start = start2++
                    if (start > max) {
                        result.push('')
                        start = min
                        start2 = min
                    }
                    let index = result.length - 1
                    if (index < 0) {
                        index = 0
                    }
                    result[index] = start
                    idmap[obj[key]] = result.map((v) => String.fromCharCode(v)).join('')
                }
                obj[key] = idmap[obj[key]]
                break
        }
        walker(obj[key])
    }
}

walker(json)
fs.writeFileSync('./dist.json', JSON.stringify(json))

由于lottie-web依赖为200k,如果要进一步压缩，可以尝试引入zipson
zipson dist大小为21.9k
在重复结构压缩上可能可以达到最高50%的压缩率
但是考虑到100多k的动画压缩也不会小多少，再引入一个zipson貌似得不偿失

原文有新记录，请进入查看

[geeeger]

盲点： 发现有官方实现， https://github.com/Lottie-Lint/lottie-compress