如果你正在使用webpack作为你的模块绑定器，请看看:

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

我强烈推荐第一种选择。它在交互式树状图中显示大小。这可以帮助您找到打包文件中的包的大小。

这篇文章中的其他答案向你展示了项目的规模，但你可能不会使用项目的所有部分，例如摇树。其他方法可能无法显示准确的大小。

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

这将打开一个可视化的空间是如何在您的压缩包中使用的。

一个“快速而肮脏”的方法是使用curl和wzrd。在快速下载压缩包，然后grep文件大小:

curl -i https://wzrd.in/standalone/axios@最新| grep内容长度

下载的包被压缩了，但没有压缩到gzip，但是当您比较两个或多个包时，您可以很好地了解包的相对大小。

如果你使用Visual Studio Code，你可以使用一个名为Import Cost的扩展。

这个扩展将在编辑器中内联显示导入包的大小。扩展利用webpack与babili-webpack-plugin，以检测导入的大小。

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

它在已部署的站点上工作:npx bundle-wizard reddit.com 它适用于您的本地项目: 对于多页面的应用程序/网站，调整最后一行与你想检查的路径。 NPM运行构建 NPX serve -s build NPX bundle-wizard localhost:5000/

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

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

在上图中，Tarball size是package的tar.gz, Total size是所有Tarball的大小。这个工具非常基本，但它做到了它所说的。

还可以使用cli工具。你可以这样安装:

npm i -g download-size

像这样使用它:

$ download-size request
request@2.83.0: 1.08 MiB

源代码可在Github: api, cli工具和web客户端。