1. Home
  2. Forum
  3. Angular
  4. Large File Size Once Importing Syncfusion Controls

Large File Size Once Importing Syncfusion Controls

Hello,

I'm working on an Angular 4.x project which started from the AngularClass WebPack Starter project. I've then altered the project using the instructions in the Syncfusion Angular Getting Started guide to import and use the Syncfusion controls. Once I did that, my vendor.js file went from 700KB, to over 14MB. This seems like a lot, although I understand that ALL Syncfusion controls are available in that context. This file size is even after the various referenced libraries have been concatenated and minified.

Is there a suggested way of pulling in the Syncfusion controls in a more modular way which would limit the amount of data being loaded at once? Or, is there a way to pull in only the necessary libraries, such as the DatePicker, and not pull in the grids, charts, etc.

Thank you.

7 Replies
AS Abinaya Subbiah Syncfusion Team August 29, 2017 06:18 AM UTC

Hi Matt Shanahan, 

Thanks for contacting Syncfusion support. 

You can import required Syncfusion Angular component from ej-angular2 package to reduce the build size. Refer to the below code snippet. 

import { BrowserModule } from '@angular/platform-browser';  
import { NgModule } from '@angular/core';  
import { EJ_BUTTON_COMPONENTS } from 'ej-angular2/src/ej/button.component';  
import { AppComponent } from './app.component';  
  
@NgModule({  
  declarations: [  
    AppComponent, EJ_BUTTON_COMPONENTS  
  ],  
  imports: [  
    BrowserModule  
  ],  
  providers: [],  
  bootstrap: [AppComponent]  
})  
export class AppModule { } 

Refer below links to know more about importing required components and reduce the build size. 



Please let us know if you need further assist on this. 

Regards, 
Abinaya S 


JN Jaromir Nechanicky August 21, 2018 03:24 PM UTC

Hello, we would like to use schedule component in our angular aplication,
I added those dependencies

    "ej-angular2": "16.2.46",
        "syncfusion-ej-global-all": "16.2.46",
        "syncfusion-javascript": "16.2.46",

and use 

import { EJAngular2Module } from 'ej-angular2';

But the size of the final bundle increased about 14 MB. I found this article and changed the
import { EJAngular2Module } from 'ej-angular2';
to 
import { EJ_SCHEDULE_COMPONENTS } from 'ej-angular2/src/ej/schedule.component';
since we only need the schudle component. But the final bundle is still 14MB bigger. Do we need to do someting else ? E.g. some special config for webpack ?

Thank you, with best regards 

BM Balaji M Syncfusion Team August 23, 2018 09:07 AM UTC

Hi Jaromir Nechanicky, 

Thanks for contacting Syncfusion support. 

We have analyzed the reported issue and prepared Angular CLI sample and take a survey on Production Build with initial CLI project, with individual Schedule Component and with EJAngular2Module. Please find the bundle size details in below table. 

CLI Project 
Production Build Size 
Initial CLI Project(Without Syncfusion Angular Component) 
234 KB 
CLI Project with Individual Schedule Component 
2.08 MB 
CLI Project with EJAngular2Module 
17.9MB 
 
Reason for Individual schedule component bundle size 

Please find below screenshot for registered widgets while importing schedule component in application. 

 

The dependent components minified file size is around 1800KB, and we referred the themes in index.html file, so while importing individual component in application the production build size is 2 MB. 

For your convenience we have prepared a sample with Schedule component and generated production build. Both are attached below. 



We suspect that the you may checking the bundle size in development mode of the application. So we recommend to ensure the bundle size after generating the dist folder in production using the following command. 

ng build --prod 
 
Please let us know if you need further assistance on this. 

Regards, 
M. Balaji 


JN Jaromir Nechanicky August 24, 2018 05:56 AM UTC

Thank you for the sample, the reason was that we have missed one import { EJAngular2Module } from 'ej-angular2'; in other module

SK Suman Kumar G Syncfusion Team August 24, 2018 12:23 PM UTC

Hi Jaromir, 

Thanks for the update. 

We are happy to hear that your issue has been resolved. Please let us know if you need further assistance. 

Sumankumar G 


SK Siva Kumaran replied to Abinaya Subbiah December 25, 2019 02:02 PM UTC

Hi Matt Shanahan, 

Thanks for contacting Syncfusion support. 

You can import required Syncfusion Angular component from ej-angular2 package to reduce the build size. Refer to the below code snippet. 

import { BrowserModule } from '@angular/platform-browser';  
import { NgModule } from '@angular/core';  
import { EJ_BUTTON_COMPONENTS } from 'ej-angular2/src/ej/button.component';  
import { AppComponent } from './app.component';  
  
@NgModule({  
  declarations: [  
    AppComponent, EJ_BUTTON_COMPONENTS  
  ],  
  imports: [  
    BrowserModule  
  ],  
  providers: [],  
  bootstrap: [AppComponent]  
})  
export class AppModule { } 

Refer below links to know more about importing required components and reduce the build size. 



Please let us know if you need further assist on this. 

Regards, 
Abinaya S 


Hi Abinaya,

We are using Chart Module. It is increasing our build size. Can you let us know If we want to use Bar, Column and Line Chart, how we can import individual component in our module.

Please share sample code.


SM Srihari Muthukaruppan Syncfusion Team December 31, 2019 10:12 AM UTC

Hi Siva, 
   
We have analyzed your query. From that, we would like to let you know that there are no separate modules for series to import. As of now we have to import  entire chart module “EJ_CHART_COMPONENTS”  from ej-angular2 package to render all the series.   
 

Let us know if you have any concerns. 

Regards, 
Srihari M 


Loader.
Up arrow icon