CSS tree-shaking experiment

[anoyomoose]

TL;DR: https://github.com/anoyomoose/q2-css-shake

An experiment in CSS tree shaking. Results (uncompressed):

Target	Before	After	Reduction
Component CSS (typical)	197 kB	106 kB	46%
MDI v7 icon CSS (typical)	418 kB	7 kB	98%
Quasar's UI Playground	836 kB	355 kB	58%
One of our own dashboards	522 kB	161 kB	69%

Worked out-of-the-box for 3 of our own dashboard projects.

Compressed results/usefulness debatable: % improvements are the same, but we're talking 50 to 100 kB reductions on projects that load MB's of JavaScript. Still, it does work, though YMMW.

It's a Vite plugin that works by first determining which components and icons we know of, then scanning for their usages in the tree-shaken JavaScript (Vite-provided import list for components, string usage for icons). Strongly preferring not stripping over stripping to avoid removing things your project actually needs. As such, it leaves in all utility classes (which is about half of Quasar's CSS)