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

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

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

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

NPM发布——试运行

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

看看这个模块成本项目。这是一个npm包，它会列出包的大小和子元素的数量。

安装: NPM install -g cost-of-modules

用法: 在您工作的目录中运行cost-of-modules。

尽量使用包装大小。

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

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

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

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

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

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