前言
上文讲到一个 vue-cli 带脚本生成内容的老项目的打包时间已经从 40min ，优化到 12min ，再到 9min 。
还有可以考虑的方式包含缩小脚本体积、依赖分包、构建的缓存等等。
那么本文就来讨论缩小脚本体积的方式。
分析
前文已知，生成的大量的脚本内容都是JSON的格式。
众所周知，JSON格式是一种 key-value 的格式，这样的格式，在遇到大量的描述内容时，势必会遇到 key 不断重复的问题，这就造成了文件体积迅速膨胀，尤其是在大量的数组，仅 value 不一样的时候。
所以，JSON 的格式一定有极大的压缩空间，尤其是我当前所遇到的场景，至少有50%以上的体积可以被压缩掉。
当然本文就不讨论具体的压缩方法了，直接上网查库解决问题。
当前生成文件的大小：
当前打包时间：
对压缩库的要求
首先，能够在前端js环境和 nodejs 环境中直接压缩和解压缩使用，这是必须满足的。
其次，压缩率要尽量高，压缩后的内容不必一定要可读，二进制都行。
然后，一定要无损压缩，解压后不影响后续的使用。
逛了一圈后选中了 compress-json 库。
github：https://github.com/beenotung/compress-json
该库不仅可以在js中使用，还有PHP、Python等版本。
使用压缩库
安装
yarn add compress-json
压缩脚本
// 接收外部命令传入的json
const json = process.argv[2]
// 使用 compress-json 进行压缩
const compressedJson = require('compress-json').compress(JSON.parse(json))
// 返回压缩后的字符串
console.log(JSON.stringify(compressedJson))
修改生成文件的命令
citem=$(node compress.js "${item}")
echo "import { decompress } from 'compress-json';export const ${uuid} = decompress(\`${citem}\`)" > "${filename}.js"
对比效果
压缩后的文件大小
压缩后的打包时长
我们可以看到打包时长略有缩短，不是特别明显，说明体积对打包时长的影响不算特别大。
当然，体积小肯定不只是这里的作用，构建产物的体积变小了，对整个项目的访问无疑是好处巨大的。
大胆猜测一下，在之前的优化中，已经将 JSON 内容修改为了字符串的形式，对于编译过程来说，这些内容几乎已经原样输出，如果这样的话，压缩过后，在本地尤其磁盘速度和cpu都比较空闲的时候，对打包的时长影响不会很大。
写在最后
虽然本次优化的结果在本地打包时不是特别明显，但是显著减小了构建产物的大小。
最后本次修改放到了 Jenkins 打包脚本中，打包时间减少到了 7min，已经快接近正常的打包时长。
当然，接下来还可以继续考虑构建分包，构建缓存等等方案。
– 欢迎点赞、关注、转发、收藏【我码玄黄】，各大平台同名。
