[Vue] Performance improvement: use scoped styles and load plugin styles on demand too

[diosmosis]

Another potential improvement to page load time: all of Matomo's styles are currently loaded synchronously in one request. It doesn't take much time, but there would be a performance improvement, if the file was smaller.

If the styles were moved to Vue modules as scoped styles, then for plugins that are loaded on demand, the styles could be removed from the main merged stylesheet.

To accomplish this:

• 18980 would need to be merged

• the importPluginUmd() would need to be augmented with the ability to load CSS files generated by webpack
• and styles moved from less files to scoped styles

Refs https://github.com/matomo-org/matomo/issues/18981 & https://github.com/matomo-org/matomo/pull/18980

[heurteph-ei]

AFAIK, load several small files takes more time (and consumes more network resources) than lone one single bigger file... But it depends on the number of (small) files you won't load thanks to your new behavior...

[diosmosis]

Scoped styles are bundled, they are not loaded individually. The bundles would only be loaded individually if Matomo is modified to load them on demand w/ plugin JavaScript. Note that the primary purpose of this issue is to remove/lessen the initial larger synchronous request for styles.