grunt_Grunt的绩效预算

grunt

It seems like the idea of performance budgeting has been gaining quite a bit of traction over the past year. This is awesome! The best way to improve web performance is to prioritize it from the get-go, and that’s exactly what a performance budget helps you do.

在过去的一年中， 绩效预算的想法似乎已经获得了很大的关注。 这太棒了！ 改善Web性能的最好方法是从一开始就对其进行优先级排序，而这正是性能预算可以帮助您完成的工作。

But having the budget set in a document somewhere doesn’t accomplish much. It needs to be enforced to really matter.

但是在某处的文档中设置预算并不能带来多大的成就。 它必须被强制执行才真正重要。

I’m a big fan of Grunt.js and use it on pretty much every project at this point. I did a lot of digging and while there are some plugins that come close, nothing quite fit what I wanted: different connection speeds, various metrics to budget, and the ability to fail a build if those thresholds aren’t met.

我是Grunt.js的忠实拥护者 ，目前几乎在每个项目中都使用它。 我做了很多事情，虽然有些插件很接近，但并没有什么适合我想要的：不同的连接速度，各种预算指标以及在不满足这些阈值的情况下构建失败的能力。

I’m also a big fan of WebPageTest, which has a slick Node API courtesy of Marcel Duran. So, armed with the API and Jeff Lembeck’s helpful guide to creating a grunt plugin, I decided to throw together a simple little task for performance budgeting.

我也是WebPageTest的忠实拥护者 ，该网站具有Marcel Duran 精巧的 Node API 。 因此，借助API和Jeff Lembeck的有关创建grunt插件的有用指南，我决定将一个简单的小任务汇总在一起，以进行性能预算。

介绍grunt-perfbudget (Introducing grunt-perfbudget)

grunt-perfbudget is a task for Grunt.js that helps you to enforce a performance budget. Using WebPagetest in the background, the task lets you set budgets for a number of different metrics: SpeedIndex, visually complete, load time, etc.

grunt-perfbudget是Grunt.js的任务，可以帮助您执行性能预算。 通过在后台使用WebPagetest，该任务使您可以为许多不同的指标设置预算：SpeedIndex，视觉效果，加载时间等。

For example, if you wanted to make sure the SpeedIndex of Google was below 1000, you would add the following to your Gruntfile.js:

例如，如果您要确保Google的SpeedIndex低于1000，则可以将以下内容添加到Gruntfile.js中：

perfbudget: {
    foo: {
        options: {
            url: 'http://google.com',
            key: 'YOUR_API_KEY',
            budget: {
                SpeedIndex: '1000'
            }
        }
    }
},

When run, grunt-perfbudget tests the URL’s you specify using WebPagetest and compares the results with the defined budget. If the budget passes, it outputs the results to the console and goes on it’s merry way. If the budget fails, it errors telling you what failed and provides a link to the full results on WebPagetest so you can dig deeper if you’d like.

运行时，grunt-perfbudget使用WebPagetest测试您指定的URL，并将结果与​​定义的预算进行比较。 如果预算通过，则将结果输出到控制台，然后继续进行。 如果预算失败，则会错误地告诉您失败的原因，并在WebPagetest上提供指向完整结果的链接，以便您可以根据需要进行更深入的研究。

I haven’t exposed everything in the WPT Node API at the moment, but there is some ability to customize your budget tests beyond metrics. You can:

目前，我还没有公开WPT Node API中的所有内容，但是有些功能可以根据指标自定义预算测试。 您可以：

• Specify a private instance of WebPagetest (Highly recommended! So much power there.)
  指定WebPagetest的私有实例(强烈推荐！功能非常强大。)
• Specify a test location
  指定测试位置
• Specify a preset connection type
  指定预设的连接类型
• Specify your own custom connection settings
  指定您自己的自定义连接设置

入门 (Getting started)

grunt-perfbudget is a Grunt.js task which means you will need to have Grunt installed to use it. From there you can install grunt-perfbudget using NPM, the Node.js package manage utility. You can find more information on the readme.

grunt-perfbudget是一个Grunt.js任务，这意味着您需要安装Grunt才能使用它。 在这里，您可以使用NPM (Node.js软件包管理实用程序)安装grunt-perfbudget。 您可以在自述文件中找到更多信息。

It does take a few moments for the test to run, so I don’t recommend using the task in any sort of watch process. Instead, using it in a more deliberate deploy/build process makes more sense. It also works nicely as a standalone task for quick checks in between formal builds.

测试确实需要花费一些时间，因此，我建议您不要在任何监视过程中使用该任务。 相反，在更仔细的部署/构建过程中使用它更有意义。 它也可以作为独立任务很好地工作，以便在正式​​版本之间快速检查。

向前走 (Going forward)

At the moment, grunt-perfbudget is super simple and does just enough to fit what I needed. Hopefully it’s useful for you as well.

目前，grunt-perfbudget非常简单，足以满足我的需求。 希望它对您也有用。

There’s a ton of potential for improvement. WebPagetest is incredibly powerful so there are a lot of different things we could do here. There are also some simple things that need doing. This is my first attempt at a Grunt task and no doubt there are plenty of things that could probably be cleaned up. For example, because I am a horrible person I haven’t actually written any tests for the plugin. (I know. I’m disappointed in me as well.)

有大量的改进潜力。 WebPagetest非常强大，因此我们可以在这里做很多不同的事情。 还有一些简单的事情需要做。 这是我第一次尝试完成Grunt任务，毫无疑问，有很多事情可能需要清理。 例如，因为我是一个可怕的人，所以我实际上没有为该插件编写任何测试。 (我知道。我也对我感到失望。)

If you have any ideas on what to do to improve the tool, or want to roll up your sleeves and tackle a few improvements yourself, hop on over to Github and jump right in.

如果您对如何改进该工具有任何想法，或者想自己动手解决一些改进，请跳至 Github并直接跳入 。

翻译自: https://timkadlec.com/2014/05/performance-budgeting-with-grunt/

grunt