Answers:
您可能要衡量的是,如果要将软件包添加到应用程序捆绑包中,其影响。其他大多数答案仅会估计源文件的大小,由于内联注释,长变量名等原因,这可能不正确。
我制作了一个小实用程序,可以告诉您打包后的包的最小+压缩大小-
https://cost-of-modules.herokuapp.com
现在指向https://bundlephobia.com
一个非常有用的工具btw。
我创建了一个工具npm download size,它检查给定npm软件包的tarball大小,包括依赖关系树中的所有tarball。这使您对预先添加依赖项的成本(安装时间,磁盘空间,运行时资源,安全审核等)有所了解。
在上图中,Tarball大小是包的tar.gz,总大小是所有tarball的大小。该工具非常基本,但是可以做到。
一个命令行工具也可以。您可以这样安装它:
npm i -g download-size
并像这样使用它:
$ download-size request
request@2.83.0: 1.08 MiB
我在今年年初创建了Package Phobia,希望将软件包的大小信息输入npmjs.com,并随着时间的推移跟踪软件包的膨胀。
此功能旨在在运行npm install
诸如服务器端依赖express
或的开发者依赖之后测量磁盘空间jest
。
您可以在以下自述文件中阅读有关此工具和其他类似工具的更多信息:https : //github.com/styfle/packagephobia
更新2020
npackjs.com网站上提供了“未压缩大小”(基本上是发布大小)以及“总计文件”。但是,这不是递归的,这意味着npm install
可能会更大,因为单个软件包可能取决于许多软件包(因此,软件包恐惧症仍然很重要)。
对于该功能,还有一个待处理的RFC,可从CLI打印此信息。
如果您将webpack用作模块捆绑器,请查看:
我绝对推荐第一个选择。它在交互式树图中显示大小。这可以帮助您在捆绑文件中查找软件包的大小。
这篇文章中的其他答案显示了项目的大小,但是您可能没有使用项目的所有部分,例如摇晃树木。然后,其他方法可能无法显示准确的尺寸。
尝试使用package-size。
npx package-size vue,vue-router,vuex react,react-dom,react-router,redux
如果使用Visual Studio Code,则可以使用名为Import Cost的扩展。
该扩展名将在编辑器中内联显示导入包的大小。该扩展程序利用带有babili-webpack-plugin的webpack来检测导入的大小。
您可以签出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);
});
看起来有些冗长,但是可以解决您描述的问题。
一种“快速而肮脏”的方法是使用curl和wzrd.in快速下载缩小的软件包,然后grep文件大小:
curl -i https://wzrd.in/standalone/axios@latest | grep Content-Length
下载的内容已缩小,但没有压缩,但是当您比较两个或多个软件包时,可以很好地了解软件包的相对大小。
curl -i https://unpkg.com/axios@0.16.1/dist/axios.min.js | grep Content-Length
howfat是另一种可以显示包装总大小的工具:
npx howfat jasmine
node_modules
在我的机器上占用了atm 21bg;npkill
可以帮助您做到这一点![在此处输入图片描述 ](i.stack.imgur.com/BKbyU.png)