随着前端开发的广泛应用，我们使用 npm 包的频率变得越来越高。但是，每次我们安装一个 npm 包时，该包的大小往往也是我们需要考虑的问题之一。在大型项目中，过多的 npm 包大小可能会导致应用程序的整体性能下降。为了解决这个问题，我们需要一些工具来帮助我们评估每个 npm 包的大小。这就是该教程的主题 - “npm 包 bundle-size 使用教程”。
什么是 bundle-size？
bundle-size 是一个用于评估 npm 包大小的工具。它可以帮助我们以图表和数字的形式展示每个 npm 包的大小，从而可以更好地管理和优化我们的应用程序包大小。bundle-size 支持多种输入方式，如 JavaScript 文件、CSS 文件和 Webpack chunk 等。
如何使用 bundle-size？
要使用 bundle-size 来评估 npm 包大小，我们需要先安装它。打开终端并输入以下命令：
npm install --save-dev bundle-size
此命令将在你的项目中安装 bundle-size。接下来，我们需要使用 bundle-size 来评估我们希望检查大小的 npm 包。这里，我们将以处理单个 JavaScript 文件为例进行说明。
评估单个 JavaScript 文件
假设你想评估 npm 包 lodash 的大小，你可以使用以下命令：
./node_modules/.bin/bundle-size lodash
该命令将输出 lodash 包的大小和一条包含 lodash 的路径的记录。
如果你想在标准输出中打印结果，可以使用以下命令：
./node_modules/.bin/bundle-size lodash --stdout
这个命令将在控制台中打印每个 npm 包的大小，以及用于记录大小的路径。
评估打包的文件
你可以使用以下命令评估打包的文件：
./node_modules/.bin/bundle-size --file build/bundle.js
该命令将评估打包文件的大小。
评估 Webpack chunk 文件
最后，你可以使用如下命令来评估 Webpack 的 chunk 文件：
./node_modules/.bin/bundle-size --webpack-stats path/to/webpack-stats.json path/to/chunk-name.js
更多选项
你可以使用不同的选项来控制 bundle-size 的输出，如 -t 来指定阈值表示是否达到我们的预期大小，以及 -w 来指定 bundle-size 执行所需的时间。
总结
该教程介绍了 bundle-size 工具，以及如何使用它评估 npm 包的大小。通过使用 bundle-size，我们可以更好地管理和优化我们的应用程序包大小。希望这份教程对你有帮助，并让你的前端开发更加高效！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/69537