如何查看 npm 包的大小？

Posted 2023-03-07

【中文标题】如何查看 npm 包的大小？

【英文标题】：How do I view the size of npm packages?

【发布时间】：2017-03-31 05:37:29

【问题描述】：

当我在 NPM 上搜索包时，我想查看包大小（以 KB 或 MB 为单位等）。 NPM 似乎没有显示此信息。

如何确定一个 NPM 包会给我的项目增加多少膨胀？

【问题讨论】：

劫持此对话，因为我想指出一个工具，它有助于从您的计算机中获取可用空间。显然node_modules占用了我机器上的atm 21bg； npkill 可以帮你做到这一点

某些模块依赖于其他包，您可能已经与其他模块一起下载了它们。

【参考方案1】：

您可能想要衡量的是，如果您要将包添加到您的应用程序包中所产生的影响。大多数其他答案将仅估计源文件的大小，由于内联 cmets、长 var 名称等原因，这可能不准确。

我制作了一个小实用程序，它会告诉你包在进入你的捆绑包之后的最小 + gzip 压缩大小 -

https://bundlephobia.com

【讨论】：

漂亮的用户界面！谢谢，这正是我想要的。不过，超大包装永远需要。

@Black 应该备份

此链接：https://cost-of-modules.herokuapp.com 现在指向https://bundlephobia.com 顺便说一句，这是一个非常有用的工具。

他们还推出了package.json 扫描仪的测试版！

这非常棒且准确！我希望它作为 VScode 中的扩展存在，Import Cost 有时不是很准确

【参考方案2】：

看看这个cost-of-modules 项目。这是一个 npm 包，会列出包的大小和子项的数量。

安装： npm install -g cost-of-modules

用法： 在您正在工作的目录中运行cost-of-modules。

【讨论】：

有点矫枉过正，它需要在计算之前重新安装所有模块。但确实有效。

不要使用这个包 - 它会创建一个名为 nodemodules.bak 的工件文件夹，它会产生丑陋的副作用

安装或重新安装总是矫枉过正，我也在寻找什么都不能装回去的选项。

我更喜欢@bkk npmjs.com/package/npm-module-stats

这个包会产生什么丑陋的副作用？

【参考方案3】：

我在今年年初创建了 Package Phobia，希望将包大小信息输入到 npmjs.com 中，并随着时间的推移跟踪包膨胀。

https://packagephobia.com

这旨在在您运行 npm install 后测量磁盘空间，以获取服务器端依赖项（如 express）或开发依赖项（如 jest）。

您可以在此处的自述文件中阅读有关此工具和其他类似工具的更多信息：https://github.com/styfle/packagephobia

---

2020 年更新

npmjs.com 网站上提供了“未打包大小”（基本上是发布大小）以及“总文件”。但是，这不是递归的，这意味着 npm install 可能会更大，因为单个包可能依赖于许多包（因此 Package Phobia 仍然相关）。

还有一个待定的 RFC 用于从 CLI 打印此信息的功能。

【讨论】：

这很好，但为什么它的结果与捆绑恐惧症有如此明显的不同呢？例如比较 lodash.lowerfirst 的结果

@DanyalAytekin 因为他们测量的是不同的东西。简短的回答：如果您正在查看前端包，请使用 BundlePhobia。如果您正在查看后端包，请使用 PackagePhobia。有兴趣可以在the readme了解更多详情。

这太棒了。你能这样做来计算尺寸的总和

【参考方案4】：

如果您使用 webpack 作为模块打包器，请查看：

webpack-bundle-analyzer webpack-bundle-size-analyzer

我绝对推荐第一个选项。它在交互式树形图中显示大小。这可以帮助您在捆绑文件中找到包的大小。

本文中的其他答案向您展示了项目的规模，但您可能并未使用项目的所有部分，例如摇树。其他方法可能无法显示准确的尺寸。

【参考方案5】：

我创建了一个工具，npm download size，它检查给定 npm 包的 tarball 大小，包括依赖关系树中的所有 tarball。这让您了解预先添加依赖项的成本（安装时间、磁盘空间、运行时资源、安全审计等）。

在上图中，Tarball size 是包的 tar.gz，Total size 是所有 tarball 的大小。该工具非常基本，但它确实做到了。

cli tool 也可用。你可以这样安装：

npm i -g download-size

并像这样使用它：

$ download-size request
request@2.83.0: 1.08 MiB

源代码在 Github 上：api、cli tool 和 web client。

【讨论】：

似乎没有计算任何依赖项的大小......即。当我运行它时，它只是列出了我问的包。当我实际安装时，安装了 1000 多个包......占用了报告的空间量的 10 倍以上。

是否可能缺少递归依赖？

它确实解析包递归，但报告 tar.gz 大小，而不是解压后的大小。 web-ui 还显示了递归依赖项的数量。你在什么包上测试过？

只是 cli。也许如果它显示一个包数......或指定 .tar.gz ....

【参考方案6】：

尝试使用 package-size。

npx package-size vue,vue-router,vuex react,react-dom,react-router,redux

https://github.com/egoist/package-size

【参考方案7】：

如果您使用 Visual Studio Code，则可以使用名为 Import Cost 的扩展。

此扩展将在编辑器中内嵌显示导入包的大小。该扩展使用带有 babili-webpack-plugin 的 webpack 来检测导入的大小。

【讨论】：

也可用于 WebStorm。

此扩展不适用于所有软件包。它显示正在计算...然后即使将超时值更改为非常大的数字后也会突然消失

【参考方案8】：

howfat 是另一种可以显示总包大小的工具：

npx howfat jasmine

【参考方案9】：

您可以查看npm-module-stats。它是一个 npm 模块，无需安装或下载模块即可获取 npm 模块及其依赖项的大小。

用法：

var stats = require("npm-module-stats");

stats.getStats("glob").then((stack) => 

  let dependencies = Object.keys(stack);
  let totalSize = dependencies.reduce((result, key, index) => 
    return result + stack[key].size;
  , 0);

  console.log('Total Size in Bytes ', totalSize);
  console.log('Total Dependencies ', dependencies.length-1);

).catch((err) => 
  console.error(err);
);

它可能看起来有点冗长，但它恰当地解决了您描述的问题。

【讨论】：

二级部门呢？

【参考方案10】：

在发布 npm 包之前，您可以使用以下命令检查包的大小。

npm publish --dry-run

我已经附上了我的 npm 包的结果。

【讨论】：

有用——如果它可以按大小排序也很好

【参考方案11】：

一种“又快又脏”的方法是使用 curl 和 wzrd.in 快速下载压缩包，然后 grep 文件大小：

curl -i https://wzrd.in/standalone/axios@latest | grep Content-Length

下载被压缩但未压缩，但是当您比较两个或更多包时，您会很好地了解包的相对大小。

【讨论】：

那么，使用另一个服务，例如unpkg.com。示例：curl -i https://unpkg.com/axios@0.16.1/dist/axios.min.js | grep Content-Length

【参考方案12】：

自从https://github.com/aholachek/bundle-wizard发布以来，我一直更喜欢它。

它适用于已部署的站点：npx bundle-wizard reddit.com

它适用于您的本地项目：

对于多页应用程序/网站，请使用您要检查的路径调整最后一行。

npm run build
npx serve -s build
npx bundle-wizard localhost:5000/

交互式视图非常有助于发现什么在哪里。

【参考方案13】：

为了检查不同软件包对您的捆绑包的影响。您可以查看source-map-explorer。

安装：

npm install -g source-map-explorer

用法：

source-map-explorer bundle.min.js
source-map-explorer bundle.min.js bundle.min.js.map
source-map-explorer bundle.min.js*
source-map-explorer *.js

这将打开压缩包中空间使用情况的可视化。