在前端开发中，性能是非常关键的指标之一。为了确保我们的应用程序在性能方面有所提升，我们可以使用 webdash-performance-budget 这个 npm 包。它可以帮助我们检测和优化我们的应用程序的性能问题，从而提高应用程序的加载速度和用户体验。
简介
webdash-performance-budget 是一个基于 Webpack 的包，它可以通过一个可视化的界面展示应用程序的性能数据，并帮助我们发现性能问题。它可以对应用程序的资源（如 JavaScript、CSS 和图片等）的大小进行统计，并输出相关的性能数据，从而帮助我们确定哪些资源需要优化、删除或者合并。
它还提供了一些配置选项，可以让我们定义自己的性能预算，即最大的资源大小和加载时间。如果应用程序超出了这些预算，webdash-performance-budget 将会告诉我们，以便我们可以采取相应的措施来减小资源大小和加载时间，从而提高应用程序的性能。
安装和配置
安装 webdash-performance-budget 可以通过 npm：
npm install -D webdash-performance-budget
安装完成后，在项目的根目录下创建一个 webdash.config.js 文件，并在其中添加以下代码：
-- -------------------- ---- -------
-------------- - -
-------- -
-
----- ---------------------
------- -
------- -
-
--------- ---------
------- -------
--
-
--------- --------
------- --------
--------- ---
--
--
------- ----------------------
--
--
--
--这个配置指定了两个性能预算：
- script 资源的大小不得超过100kb；
- 总的资源大小不得超过300kb，并且总的大小不能低于80%。
同时，配置忽略了 node_modules 目录下的资源。
在 package.json 中添加如下命令，以启动性能监测服务器：
{
"scripts": {
"performance": "webdash --config webdash.config.js --port 9876",
},
}运行 npm run performance 命令即可在浏览器中查看性能监测页面。
使用
webdash-performance-budget 的界面如下所示：
界面中会展示出所有资源的大小，以及预算的大小和比率。当某个资源的大小超出了预算时，它就会变成红色，以提示我们需要对其进行优化。
我们还可以在视图中进行筛选，以查找出性能问题。我们可以根据资源类型、大小、最后修改时间等多个条件来筛选出我们需要的资源，便于我们找到问题源头。
结语
使用 webdash-performance-budget 可以很方便地监测应用程序的性能，帮助我们发现性能问题，并定位问题。通过了解和学习它，我们可以更好地优化我们的应用程序，提高用户的体验和满意度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671048dd3466f61ffdca3