Fanis Prodromou
  • Blog
  • About
  • Blog
  • About
Search by typing & pressing enter

YOUR CART

7/6/2020 Comments

Mind your imports and save the bundle size

Picture
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
Picture
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!!
Picture
Let's expand the <style> tags
Picture
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
Picture
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!!
Picture
And the bundle size is
Picture
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
Comments
comments powered by Disqus

    Author

    I am an Angular GDE, content creator who loves sharing knowledge

    Follow @prodromouf
    View my profile on LinkedIn

    Tags

    All Angular Angularjs General Graphql Ionic Javascript .net Nodejs Typescript

Proudly powered by Weebly