styles.css size

Question

Hi,I have a few navigation pages where page one has a grid, page two has graphs and page three diagram.   When angular is compiled to production it produces one sytle.css file is larger (1.7Mb).   Is there anyway to dynamically load the CSS (split up the styles.css) only when needed instead of loading on start of first/initial webpage?.  Thank you.

Jesus Arockia Sankaran S · Accepted Answer

Hi Albert, 

We would let you know that while publishing Angular application the styles and scripts will be included to the Angular CLI pipeline if we import the files in the application which results in transferring the optimized files to the dist folder while building “ng prod --build”. Other way to ship the script and styles files to dist folder is to include it in assets folder, then we can refer the files from the assets folder in to our application.  

We do not recommend referring styles from assets folder since we need to load multiple style files for a single component in “index.html” file.  

Reference Image: 
  



Please get back to us if you have any query. 

Regards, 
Jesus Arockia Sankaran S

Jesus Arockia Sankaran S · Answer

Hi Albert,   
 
We can use the lazy loading feature of the Angular to load the component wise CSS and we have created a simple protype sample for this that can be downloaded from the below link.  
 
Sample: https://www.syncfusion.com/downloads/support/forum/157836/ze/Lazyloading1855706274 
 
Code Snippet:  
angular.json  




 
"extractCss": true,  
            "styles": [  
              "src/styles.css",  
              {  
                "input": "src/app/first/first.css",  
                "bundleName": "first",  
                "inject": false  
              },  
              {  
                "input": "src/app/second/second.css",  
                "bundleName": "second",  
                "inject": false  
              }  
            ],  
 
 
./src/app/first/first.component.ts  




 
import { Component, OnInit, Inject } from '@angular/core';  
import { DOCUMENT } from '@angular/common';  
import { data } from './datasource';  
import { PageSettingsModel } from '@syncfusion/ej2-angular-grids';  
  
@Component({  
  selector: 'app-first',  
  templateUrl: './first.component.html',  
  styleUrls: ['./first.component.css']  
})  
export class FirstComponent implements OnInit {  
  
  public data: object[];  
    public pageSettings: PageSettingsModel;  
  
  constructor(@Inject(DOCUMENT) private document: Document) {}  
  
  loadStyle(styleName: string) {  
    const head = this.document.getElementsByTagName('head')[0];  
  
    let themeLink = this.document.getElementById(  
      'client-theme'  
    ) as HTMLLinkElement;  
    if (themeLink) {  
      themeLink.href = `${styleName}.css`;  
    } else {  
      const style = this.document.createElement('link');  
      style.id = 'client-theme';  
      style.rel = 'stylesheet';  
      style.href = `${styleName}.css`;  
  
      head.appendChild(style);  
    }  
  }  
  
  ngOnInit(): void {  
    this.loadStyle('first');  
    this.data = data;  
    this.pageSettings = { pageSize: 6 };  
  }  
  
}  
 
Please get back to us if you need any further assistance on this.  
  
Regards,  
Jesus Arockia Sankaran S

Albert K · Answer

Thanks for the Example but I am am looking at loading syncfusion css like below on a on demand basis/lazy load instead of having the angular compile bundle it all into one big styles.css file.

../node_modules/@syncfusion/ej2-base/styles/material.css

../node_modules/@syncfusion/ej2-angular-grids/styles/material.css