Gather breakdown of modules content

[romaricpascal]

What

Collect which modules get added to built bundles when importing our modules¹. This can be:

• importing individual components directly (import Accordion from 'govuk-frontend/components/accordion.mjs')
• importing individual components from all.mjs (import {Accordion} from 'govuk-frontend')
• importing all exports (import * as GOVUKFrontend from 'govuk-frontend')

Display this breakdown inside the review app so it can be accessible for each pull-request.

Note: The performance spike used the approach of building from a virtual file with a specific import for each scenario. We may be able to collect the same stats more efficiently at build time, so it'll be worth giving a quick comparison at both options.

Why

This will let us check which sub-modules are part of each of our main modules, and spot when our changes make a component inadvertently bring in a sub-module they don't need.

This also lets us check that our modules tree-shake as expecting, bringing only the code they need in the final bundle.

Who needs to work on this

Developers

Who needs to review this

Developers

Done when

• We collect breakdown of modules
• We serve this breakdown from the review app ²:
  • as a text breakdown for accessibility
  • as an interactive visualisation
• We list all modules being monitored in an index page so we can navigate to them

Footnotes

1. Using a similar approach to the performance spike, with rollup-plugin-visualizer ↩

2. rollup-plugin-visualizer provides 3 kinds of visualisation, but we only really need the treemap or sunburst. Neither are particularly accessible, though (information is only available on hover), hence the text alternative we need to have. ↩