如何查看npm包的大小?

当我在NPM上搜索包时，我想看到包的大小(KB或MB等)。NPM似乎没有显示这一信息。

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

103630 次浏览
小开

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

< p >安装: npm install -g cost-of-modules < / p > < p >用法:

.在你工作的目录下运行cost-of-modules

enter image description here

小开

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

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

小开
最佳答案

你可能想要衡量的是，如果你要将一个包添加到你的应用程序包中，它的影响。大多数其他答案只会估计源文件的大小，这可能不准确，因为内联注释，长var名称等。

我做了一个小工具，它会告诉你包后的最小+ gzip大小，它会进入你的bundle -

https://bundlephobia.com

小开

一个“快速&dirty”的方法是使用curl和wzrd.in快速下载压缩包，然后grep文件大小:

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

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

小开

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

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

Webpack Bundle Analyzer

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

小开

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

< a href = " https://arve0.github。io/npm-download-size/" rel="noreferrer">download size of webpack . io/npm-download-size/" rel="noreferrer">cli工具也是可用的。你可以这样安装:

npm i -g download-size

像这样使用它:

$ download-size request
request@2.83.0: 1.08 MiB

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

小开

尝试使用包大小。

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

https://github.com/egoist/package-size package-size npm < / p >

小开

如果你使用Visual Studio Code，你可以使用一个名为进口成本的扩展。

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

小开

今年早些时候，我创建了“Package Phobia”，希望能在npmjs.com上获取包装大小信息，并跟踪包装膨胀的情况。

https://packagephobia.com

img

这是为了在您为服务器端依赖关系(如express)或开发依赖关系(如jest)运行npm install后测量磁盘空间。

你可以在这里阅读更多关于这个工具和其他类似工具的自述:https://github.com/styfle/packagephobia

更新2020

“未包装尺寸”;(基本上是发布大小)可在npmjs.com网站上与“总文件”一起使用。然而，这不是递归的，这意味着npm install可能会更大，因为一个包可能依赖于许多包(因此包恐惧症仍然相关)。

还有一个未决的RFC用于从CLI打印此信息的特性。

小开

howfat是另一个可以显示总包大小的工具:

npx howfat jasmine

screensot

小开

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

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

enter image description here

小开

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

npm publish --dry-run

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

enter image description here

小开

我更喜欢https://github.com/aholachek/bundle-wizard，因为它发布了。

  • 它在已部署的站点上工作:npx bundle-wizard reddit.com

  • 它适用于您的本地项目:

    对于多页面的应用程序/网站，调整最后一行与你想检查的路径。

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

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


提交答案