Generate budgets file from LHR

[BioPhoton]

Problem

Creating budgets files requires to read the lighthouse docs on budgets.

If the basic structure is given there is additional knowledge required on the tested application as well as web performance to get a useful initial budgets file to go with.

That builds up a barrier for users to try it out or work with it.

Solution

A generate command that automatically generates a budgets file under a specific location. This command can also be used with an additional parameter to derive the budgets directly from a lighthouse report.

CLI Example:

generate a budget file npx user-flow init --budgets or with file name npx user-flow init --budgets budgets1.json

This generates a budgets.json file in the executing directory.

generate a budget file from a given LHR npx user-flow init --budgets --lhr ./report.json

This generates a budgets.json file in the executing directory derived from a lhr located under npx user-flow init --budgets --lhr ./report.json.

Potential Optional params:

--useRc - insert the budgets directly into the rc file --useRc .user-flowrc.json - insert the budgets directly into a rc file

Budget Example for new budget:

Resource Type	Transfer Size
Script	142.03 KB
Stylesheet	2

Metric	Measurement
Largest Contentful Paint	2500 ms
Cumulative Layout Shift	0.25

Budget Example for derived budget:

The following types are derived for transfer size measures:

• xhr
• js
• css
• font
• doc
• ws
• wasm
• manifest

The type img is excluded as the target may have too dynamic content. The type other is excluded as too unclear if the number is static.

The following types are derived for count size measures:

• xhr
• js
• css

Todos:

• [x] add param budgets to init command - #225
  • [x] add generate logic
  • [x] add tests for default and named file
  • [x] add docs for budgets param
• [x] add param lhr to init command
  • [x] add tests for default and named file
  • [x] add docs for lhr param