npm中`unpacked size`的含义解析及缩减方法探讨

一、unpacked size的真实含义 #

unpacked size是指你发布到npm的包被完全解压后，所有文件的总大小。只要是你没通过.npmignore文件或package.json的files字段排除的内容，都会被算入其中——包括但不限于：

• 未压缩的源码文件（如.tsx、.jsx原文件）
• 测试用例（__tests__目录、.spec.js这类测试文件）
• 文档文件（README、CHANGELOG、示例代码）
• 构建脚本、配置文件（webpack.config.js、tsconfig.json等）
• 若发布时未做依赖外置，还会包含完整的依赖包源码

二、和Bundlephobia检测结果差异大的原因 #

Bundlephobia检测的是生产环境下用户实际会加载的代码体积：

1. 它只会分析包的入口文件，通过Tree Shaking剔除未被使用的代码
2. 最终结果是经过压缩（minify）和gzip处理后的体积
3. 完全忽略测试文件、源码、配置这些用户用不到的内容

你的react-chicago包unpacked size接近2MB，就是因为包含了上述所有非必要发布的文件，而Bundlephobia只统计了用户实际会引入的压缩后核心代码，所以才会出现12.2kb的结果。

三、如何优化unpacked size #

可以通过两种方式缩小unpacked size：

• 在.npmignore里列出不需要上传的文件/目录（比如__tests__、src源码目录、构建脚本等）
• 在package.json的files字段里明确指定只需要发布的文件（比如构建后的dist目录、README、package.json等）

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