Mind your imports and save the bundle size

Did you know that a wrong SCSS usage can increase the bundle size of your Angular application? And you know what this issue is, right? A performance issue!! The bigger the bundle size the more time the browser requires to download all the files and the more time it takes to paint the page. 

A side note here: The CSS is render blocking which means that the browser won't render anything until all the CSS is downloaded and the CSSOM is constructed. 

Having this in mind, we have to take extra care of our CSS. Don't we? :) 

The example

This is the application that we are going to use

Let's examine what we see here:

1. The app.module along with the app.component is the eager load module
2. The one.module along with the one.component is the lazy load module
3. The _buttons.scss and the _colors.scss are the partial SCSS files which both are imported in the styles.scss

Let's see some code

styles.scss

_colors.scss

_buttons.scss

Let the fun begin

The files app.componet.scss and one.component.scss require the color variables. So, we will load ALL the global styles which contain the color variables too

app.component.scss

one.component.scss

If we open the developer tools  we will see in the Elements tab that the global styles appear two times. Which is not good at all!!

Let's expand the <style> tags

If you look closer you will notice that it has the global styles (e.g. .my-btn) and the encapsulated global styles (e.g. .my-btn[_ngcontent-pvb-c16]).

Why did that happen? Well, because we said to do so. If you remember, we imported ALL the global styles in the app.component.scss. 

And this is the bundle size

Note that the second chunk is the lazy load module

Let's improve it

This time we won't import ALL the global styles in the files app.component.scss and one.component.scss but only the required ones

app.component.scss

one.component.scss

Let's examine again the Elements tab in the developer tools. As you can see the the global styles appear only once. Much better!!

And the bundle size is

The lazy load module has the half size!! And note that this is a very small application. Imagine the extend of it on a real life application

Conclusion

Do not import all the global styles in your components. You have to import only the required partial files and re-use the variables