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 exampleThis is the application that we are going to use Let's examine what we see here:
Let's see some code styles.scss
_colors.scss
_buttons.scss
Let the fun beginThe 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 itThis 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 ConclusionDo not import all the global styles in your components. You have to import only the required partial files and re-use the variables
Comments
|
AuthorI am an Angular GDE, content creator who loves sharing knowledge TagsAll Angular Angularjs General Graphql Ionic Javascript .net Nodejs Typescript |