如何查看npm包的大小？

Question

当我在NPM上搜索包时，我希望看到包大小（以KB或MB为单位）。 NPM似乎没有显示这些信息。

如何确定NPM包添加到项目中的膨胀程度？

Answer 1

您可能想要衡量的是，如果要将其添加到您的应用包中，则包会产生什么影响。大多数其他答案仅估计源文件的大小，这可能由于内联注释，长var名称等而不准确。

我制作了一个小实用程序，它会告诉你包裹的最小+ gzip大小>它进入你的包裹 -

https://bundlephobia.com

Answer 2

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

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

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

Answer 3

我创建了一个工具npm download size，它检查给定npm包的tarball大小，包括依赖关系树中的所有tarball。

在上图中， Tarball size 是包的tar.gz，总大小是所有tarball的大小。该工具非常基础，但它完成了它所说的。

还可以使用cli tool。您可以这样安装：

npm i -g download-size

并像这样使用它：

$ download-size request
request@2.83.0: 1.08 MiB

这是asciinema demo。

源代码可在Github上找到：api，cli tool和web client。

Answer 4

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

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

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

这篇文章中的其他答案显示了项目的大小，但您可能没有使用项目的所有部分，例如树摇动。其他方法可能无法显示准确的大小。

Answer 5

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

https://packagephobia.now.sh

这是为了在运行npm install后针对服务器端的依存关系（例如express或dev依存关系（如jest）来测量磁盘空间。

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

---

注意：尽管npm团队没有改变网站的动议，但他们正在考虑将已安装的大小添加到cli中。有关更多信息，请参见RFC 1。

Answer 6

尝试使用包大小。

{{1}}

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

Answer 7

您可以查看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);
});

它可能看起来有点冗长，但它可以解决您所描述的问题。

Answer 8

A＆＃34;快速＆amp;脏＆＃34;方法是使用curl和wzrd.in快速下载缩小的包，然后grep文件大小：

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

下载是缩小的但不是gzip，但是当你比较两个或更多个包时，你会很清楚包的相对大小。

Answer 9

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

  

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

Answer 10

howfat是另一种可以显示包装总尺寸的工具：

npx howfat jasmine

Answer 11

为了检查不同包对您的包的影响。您可以查看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

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

Answer 12

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

npm publish --dry-run

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