yarn build-devtools && yarn devtools
yarn build-devtools creates these files:
dist
├── dt-report-resources
│ ├── report-generator.js
│ ├── report.css
│ ├── report.js
│ ├── template.html
│ └── templates.html
└── lighthouse-dt-bundle.js
- the big
lighthouse-dt-bundle.jsbundle - the much smaller
report-generator.jsbundle (just two modules). This is exported as ReportGenerator - copies all the
report.{js,css}/template(s).htmlfiles (these are not transformed in any way). We call these the report assets.
How the Audits Panel uses the above:
AuditsService uses self.runLighthouseInWorker, the main export of the big bundle.
AuditsPanel uses new Audits.ReportRenderer(dom), which overrides self.ReportRenderer, which is exported by report.js. This renderer takes a Lighthouse result, templates.html, and a target DOM element - it then renders the report to the target element.
AuditsPanel also registers report.css.
report-generator.js takes a Lighthouse result and creates an HTML file - it concats all of the report assets to create a singular HTML document. See: https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/report/report-generator.js#L35
A Lighthouse report (including what is shown within the Audits panel) can also Export as HTML. Normally the report just uses documentElement.outerHTML, but from DevTools we get quine-y and use Lighthouse.ReportGenerator. I only mention this because this is why the report assets are seperate files - there is a dual purpose.
Firstly is to be used to create the report within the Audits Panel DOM. report.js exports the renderer, and report.css and templates.html are pulled from .cachedResources.
Secondly is to be used to export as HTML. We can't just scrape the outerHTML like we normally do, because we render some thing a bit
special for DevTools, and we're not the only thing in that DOM (we would get all of DevTools). So we use Lighthouse.ReportGenerator (important: this is only used here!) to create this HTML export. It requires all of the report assets, so to prevent double-bundling we shim its report assets module to just read from the .cacheResources.
GoogleChrome/lighthouse#7421
GoogleChrome/lighthouse#7567