Split css/js into separate libraries and only load them when needed

Problem/Motivation

All CivicTheme's css and js are loaded on all pages with civictheme.css and civictheme.js whether a component is being used or not.

For e.g. all the Alert js and css are loaded on every page whether an Alert is displayed on that page or not. This bloats the css/js on all pages as some of the css/jss are not actually used (that is, unnecessary css/jss are loaded).

Reducing the unsed css/jss can greatly help with page performance across the entire website.

Proposed resolution

Split the css/js into their own libraries and loaded them via their respective templates. This will ensure the relevant css/jss are only loaded when it's being used.

For e.g For the case of Alerts, in civictheme.libraries.yml you can have:

alerts:
  css:
    theme:
      dist/alerts.css: {}
  js:
    dist/alerts.js: {}

Then in alert.inc you can then have:

{{ attach_library('civictheme/alerts') }}

That way, only when an Alert is being used, only then it's related css/jss are loaded.