npm包size on disk、size on bundle、minified及gzip体积差异咨询

size on disk 与 size on bundle 的区别 #

• size on disk：执行npm install完成安装后，包（包含其嵌套依赖）在本地node_modules目录里实际占用的硬盘空间大小。这个数值把包自带的类型声明、source map、文档、测试用例、全格式构建产物（cjs/esm/umd等）甚至冗余废弃文件全算在内，只影响本地硬盘占用和依赖安装速度，和最终上线的应用体积没有直接关联。很多时候你看到一个包size on disk大得夸张，其实大半内容根本不会被打包进线上产物，不用被这个数值误导。
• size on bundle：项目中引入该包后，经过构建工具（Rollup/Vite/Webpack等）Tree Shaking、按需裁剪、模块合并处理后，真正进入最终生产环境产物的代码体积。这个数值直接决定用户加载应用时需要下载的代码量，和线上访问性能强相关。同一个包的bundle size浮动空间很大，全量引入和按需引入可能差出数倍。

什么是minified size #

minified size即代码最小化压缩后的体积，是生产环境代码的常规状态。
压缩处理通常会做这几类操作：

• 移除所有代码注释、多余空格、换行、格式缩进
• 把长变量名、函数名替换为极短的单/双字符命名
• 删掉永远不会执行的死代码，折叠可以静态计算出结果的常量表达式
  处理后的代码几乎没有可读性，但体积可比原始源码缩小40%-60%。要注意这个数值只是代码结构层面压缩后的裸体积，还没算网络传输层的压缩增益。

npm 触发gzip压缩的场景 #

npm 仅在包的发布、下载链路中使用gzip，不会介入业务代码的生产压缩流程，具体场景只有两类：

1. 开发者发布包到npm仓库时，npm会自动将包打包为gzip压缩的.tgz归档文件存在仓库服务器上
2. 执行npm install拉取包时，从仓库下载的就是预压缩好的tgz包，下载完成后npm才会解压写入本地node_modules，这个设计能大幅降低下载时的带宽消耗，提升依赖安装速度

补充：你在npm包详情页看到的"gzip size"指标，指的是包的最小化产物再经gzip压缩后的传输体积，这个数值模拟的是用户访问线上资源时的实际下载大小，通常比minified size还小60%左右，但这个压缩环节一般由Web服务器或者构建插件完成，不属于npm本身的能力范围。

内容的提问来源于stack exchange，提问作者mikwee