vue-cli老项目继续优化:json压缩神器 compress-json

前言

上文讲到一个 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等版本。

使用压缩库

安装

bash 复制代码
yarn add compress-json

压缩脚本

javascript 复制代码
// 接收外部命令传入的json
const json = process.argv[2]

// 使用 compress-json 进行压缩
const compressedJson = require('compress-json').compress(JSON.parse(json))

// 返回压缩后的字符串
console.log(JSON.stringify(compressedJson))

修改生成文件的命令

bash 复制代码
citem=$(node compress.js "${item}")
echo "import { decompress } from 'compress-json';export const ${uuid} = decompress(\`${citem}\`)" > "${filename}.js"

对比效果

压缩后的文件大小

压缩后的打包时长

我们可以看到打包时长略有缩短,不是特别明显,说明体积对打包时长的影响不算特别大。

当然,体积小肯定不只是这里的作用,构建产物的体积变小了,对整个项目的访问无疑是好处巨大的。

大胆猜测一下,在之前的优化中,已经将 JSON 内容修改为了字符串的形式,对于编译过程来说,这些内容几乎已经原样输出,如果这样的话,压缩过后,在本地尤其磁盘速度和cpu都比较空闲的时候,对打包的时长影响不会很大。

写在最后

虽然本次优化的结果在本地打包时不是特别明显,但是显著减小了构建产物的大小。

最后本次修改放到了 Jenkins 打包脚本中,打包时间减少到了 7min,已经快接近正常的打包时长。

当然,接下来还可以继续考虑构建分包,构建缓存等等方案。

-- 欢迎点赞、关注、转发、收藏【我码玄黄】,各大平台同名。

相关推荐
gnip2 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
一只叫煤球的猫3 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel4 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼5 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手8 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法8 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku8 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode9 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu9 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu9 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript