Ionic 3.4 css file size


#1

I just upgraded to 3.4 in part because of (https://github.com/ionic-team/ionic/pull/11635) which I was hoping would reduce the amount of css I have to bundle. It works but the result wasn’t very inspiring. Just wondering if anyone is working on reducing the amount of css we need to include as it seems to grow with every release.

I’ve run a few of my pages through uncss (https://github.com/giakki/uncss) and it seems like the amount of css in use on my pages is actually minuscule (<2k most pages)…

current sizes of main.css for my app (build --prod --release)
3.3: 734kb
3.4: 810kb $app-direction: null (we grew ~70kb minified in this release :confused: )
3.4: 711kb $app-direction: ltr
3.4: 714kb $app-direction: rtl


#2

Here are some investigations I did a while back on that topic:

Add in RTL support would naturally increase the CSS. Not sure if or when better tree shaking of the CSS will happen.


#3

3.4.0 introduces a lot of rtl support which means some code duplication.
It seems like it gonna be reverted though, and ltr will be defaulted, so you get a 3% decrease in bundle size over 3.3.0.

That PR was actually to fix stuff like:

margin-top: 5px;
margin-bottom: 5px;
margin-left: 5px;
margin-right: 5px;

to be margin: 5px

Which I believe is the 23kb difference you see in pure ltr.

However, because of css specificity rules, we had to move a bunch of code to be under [dir=...].

Talking about the real numbers (pure framework, everything at default):
ltr: 375kb, rtl: 378kb, default(ltr+rtl): 481kb

So correct, there is a 28% increase to the core. (a lot, and there is a bit more coming)
I am guessing your bundle size is so large because perhaps you are using a lot of colors. Every color is an additional ~50kb.

When I am done adding more and more to the bundle, the next step will be to move this to app-scripts, which reduces the bundle size by 3%.

I was also thinking about shifting my focus when RTL is done, to fix the colors issue, there might be a very interesting solution.


#4

Thanks Chris, minimizing my use of the colors array cut my file size in half!

That thing should really come with a warning. I buy lots of themes and all the theme developers use it even if it’s not adding anything beyond what a variable does.


#5

@AmitMy Thanks!

Fixing the colors thing would be great. I don’t think any of the ionic devs I’ve worked with knew it cost so much.