Optimize bundle size

[fschmenger]

Currently production source maps make up for roughly 7MB, which is almost half the size of a bundled wegue application.
I would like to hear your opinion, whether we should disable those for production use.

[fschmenger]

I checked after the migration to vite and source maps have been eliminated from the production build. The whole bundle size is roughly 10 MB by now, while a large fraction is taken by woff2 fonts (materialdesignicons, roboto) in the asset folder.

This already a huge step forward. I leave the issue open to look for potential improvements:

• Can we somehow improve the treeshaking for materialdesignicons?
• Can we remove the roboto font import in favor of the system font fallback (Vuetify always fall back to Arial or sans-serif - see the discussion in Migration to Vite #449 (comment))

[sronveaux]

Good idea to keep this open so we can discuss here and investigate a bit when we get some spare time.

Concerning the improvements you suggest here, I just wanted to put some thinkings now:

• Perhaps treeshaking of materialdesignicons could be improved for sure but we should be very careful as the icons can be used dynamically inside configuration files to define module icons for example. As those configuration files are static files, they don't influence the build process, which means icons declared here could be removed by treeshaking if not included implicitly somewhere else in the codebase.
• I would stay very careful with Roboto in all cases as fully and cleanly changing Vuetify default font is a problem known for long and still has no official way to do it. You can have a look at this endless issue thread to get an idea. Just to give some other facts about this point:
  • Roboto is part of Vuetify dependencies as stated in their installation guide. They say it is the default font but never explain how to change it cleanly.
  • If Roboto is not present, Vuetify fallback goes to sans-serif only for now as can be found in their codebase.
  • We saw while discussing before that Roboto was loaded in development but not directly in production where it was only loaded dynamically later when opening the hamburger menu for example. We also saw that the default was Avenir. This is because of this specific line inside wegue.css which is certainly a try to change Vuetify default font at that time.
  • Coming back to Vuetify Roboto usage, it seems it is only used at the single line I talked about before. Thinking a bit more about the latest comment of their issue 8169, perhaps we could give a try to this, remove Roboto and Wegue CSS rule and force Avenir, Helvetica, Arial, sans-serif directly inside the vite-plugin-vuetify. If all goes on well, we could then get rid of the Roboto font but stay aware of this in case something bad happens later while upgrading Vuetify.

[sronveaux]

Hi @fschmenger,

Just some words about this one following my latest tests and analyses...

Concerning Roboto, I just created #463 that will solve the problem, hopefully as cleanly as possible. Users will have the possibility to define and embed the font they want in the end which could be nice but no font will be present in the default build... except the icon fonts though...

Concerning the icon fonts, the biggest problem comes from materialdesignicons as you spotted. This is due to the fact that the .CSS file defining the font declares multiple @font-face formats here. There is an open issue for year now about this and I'm afraid this won't be solved soon (if ever) as the repository wasn't updated for two years...
To try and address this point, I see mainly two possibilities:

1. Use the @mdi/js SVG alternative which is fully treeshakeable but is not recommended at all in our case as explained in my previous comment. As icons can be defined dynamically inside configuration files and because those files are not analysed by Vite, you will end with missing icons at runtime which is not option from my point of view.
2. Somehow modify the official @mdi/font CSS file so only woff2 format is kept in the @font-face. If we want to do something, this is the way to go.

In practice, the two direct ways of doing this would be to:

1. Create our own package with the modified CSS file included... a bit tedious from my point of view
2. Create a dedicated Vite plugin that would, for this specific node_modules/@mdi/font/css/materialdesignicons.css file, transform the code and remove useless font formats.

The second approach, even though a bit technical, could be done quite easily I think... if this sounds reasonable I can give it a try as soon as I have a little time... just tell me what you think about it!

Cheers

[chrismayer]

Thanks for your discussion and inputs @fschmenger and @sronveaux. I totally agree that we should reduce bundle size. Fun fact: Yesterday I deployed 2 apps to a webspace in the train via mobile network and it was horrific. Surely related to the miserable network connection. But to be honest one would expect we have an HTML file and some JS/CSS, which should not be 10MB.

To get rid of Roboto I already agreed in #463.

Regarding optimizing the materialdesignicons:

• Agree that treeshaking might be difficult due to dynamic icon configuration. If we want to stick to that approach we cannot use treeshaking for icons.
• Could we use a different icon library? Would that help us?
• If not, I'd favor the Vite plugin approach suggested by @sronveaux

[sronveaux]

Hi @chrismayer and thanks for your return on this one.

Concerning Material Design Icons, I personally appreciate the fact that the default and recommended icon set for Vuetify is a community-maintained one and not an always-changing product which, even if free, is developed by a big commercial company.
We'll see about timing but I managed to give it a fast test and managed to develop a Vite plugin that effectively removes all the versions except the woff2 one. I still have to test that everything goes on well, both in dev and build and clean the code so it is a bit more robust as it is now.

In parallel, it doesn't mean that we shouldn't use other libraires at all if you think this is better, however, shouldn't we still include MDI in all cases for now, mentioning it as deprecated if we decide to use something else, and only remove it in a later release?

I must admit I have no real opinion about which one to use, Vuetify also supports Font Awesome out of the box and we could also think about moving from material-icons (not MDI so) to material-symbols which is its successor since April 2022 as explained on official Google repository. I'm afraid this could lead to a bundle size increase instead of a decrease though as the number of icons has literally exploded...
Another nice alternative often used is the Phosphor icon set.
Once again I don't have real opinion on those...

[chrismayer]

Thanks for your detailed reply @sronveaux. I am also fine to keep Material Design Icons. I just wondered, if others would solve our bundle size problem from a technical point of view. So since this does not seem to be the case, no need to change IMHO.

If the suggested Vite Plugin approach works, this should be good for the moment.