当我在 NPM 上搜索包时，我想查看包大小（以 KB 或 MB 为单位等）。 NPM 似乎没有显示此信息。
如何确定一个 NPM 包会给我的项目增加多少膨胀？
【问题讨论】：
node_modules占用了我机器上的atm 21bg； npkill 可以帮你做到这一点
您可能想要衡量的是，如果您要将包添加到您的应用程序包中所产生的影响。大多数其他答案将仅估计源文件的大小，由于内联 cmets、长 var 名称等原因，这可能不准确。
我制作了一个小实用程序，它会告诉你包在进入你的捆绑包之后的最小 + gzip 压缩大小 -
【讨论】：
https://cost-of-modules.herokuapp.com 现在指向https://bundlephobia.com 顺便说一句，这是一个非常有用的工具。
package.json 扫描仪的测试版！
看看这个cost-of-modules 项目。这是一个 npm 包，会列出包的大小和子项的数量。
安装：
npm install -g cost-of-modules
用法：
在您正在工作的目录中运行cost-of-modules。
【讨论】：
我在今年年初创建了 Package Phobia，希望将包大小信息输入到 npmjs.com 中，并随着时间的推移跟踪包膨胀。
这旨在在您运行 npm install 后测量磁盘空间，以获取服务器端依赖项（如 express）或开发依赖项（如 jest）。
您可以在此处的自述文件中阅读有关此工具和其他类似工具的更多信息：https://github.com/styfle/packagephobia
2020 年更新
npmjs.com 网站上提供了“未打包大小”（基本上是发布大小）以及“总文件”。但是，这不是递归的，这意味着 npm install 可能会更大，因为单个包可能依赖于许多包（因此 Package Phobia 仍然相关）。
还有一个待定的 RFC 用于从 CLI 打印此信息的功能。
【讨论】：
如果您使用 webpack 作为模块打包器，请查看：
我绝对推荐第一个选项。它在交互式树形图中显示大小。这可以帮助您在捆绑文件中找到包的大小。
本文中的其他答案向您展示了项目的规模，但您可能并未使用项目的所有部分，例如摇树。其他方法可能无法显示准确的尺寸。
【讨论】：
我创建了一个工具，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。
【讨论】：
尝试使用 package-size。
npx package-size vue,vue-router,vuex react,react-dom,react-router,redux
【讨论】：
如果您使用 Visual Studio Code，则可以使用名为 Import Cost 的扩展。
此扩展将在编辑器中内嵌显示导入包的大小。该扩展使用带有 babili-webpack-plugin 的 webpack 来检测导入的大小。
【讨论】：
howfat 是另一种可以显示总包大小的工具：
npx howfat jasmine
【讨论】：
您可以查看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);
});
它可能看起来有点冗长，但它恰当地解决了您描述的问题。
【讨论】：
自从https://github.com/aholachek/bundle-wizard发布以来，我一直更喜欢它。
它适用于已部署的站点：npx bundle-wizard reddit.com
它适用于您的本地项目：
对于多页应用程序/网站，请使用您要检查的路径调整最后一行。
npm run build
npx serve -s build
npx bundle-wizard localhost:5000/
交互式视图非常有助于发现什么在哪里。
【讨论】：
为了检查不同软件包对您的捆绑包的影响。您可以查看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
这将打开压缩包中空间使用情况的可视化。
【讨论】：