Large File Size Once Importing Syncfusion Controls

[Matt Shanahan]

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.

[Abinaya Subbiah]

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. 

https://help.syncfusion.com/angular/gettingstarted/getting-started-angular-cli#importing-required-syncfusion-angular-components 

KB Link: https://www.syncfusion.com/kb/7861/importing-required-syncfusion-angular-components-to-reduce-bundle-size 

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

Regards, 

Abinaya S 

[Jaromir Nechanicky]

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 

[Balaji M]

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. 

Sample 

dist 

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 

[Jaromir Nechanicky]

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

[Suman Kumar G]

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. 

Regards, 

Sumankumar G 

[Siva Kumaran]

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. 

https://help.syncfusion.com/angular/gettingstarted/getting-started-angular-cli#importing-required-syncfusion-angular-components 

KB Link: https://www.syncfusion.com/kb/7861/importing-required-syncfusion-angular-components-to-reduce-bundle-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.

[Srihari Muthukaruppan]

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.   

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/EJ1AngularPackage-1195674876.zip  

Let us know if you have any concerns. 

Regards, 

Srihari M