We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Large File Size Once Importing Syncfusion Controls

Thread ID:

Created:

Updated:

Platform:

Replies:

132367 Aug 28,2017 04:18 PM Aug 24,2018 08:23 AM Angular 5
loading
Tags: General
Matt Shanahan
Asked On August 28, 2017 04:18 PM

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 [Syncfusion]
Replied On August 29, 2017 02:18 AM

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 


Jaromir Nechanicky
Replied On August 21, 2018 11:24 AM

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 [Syncfusion]
Replied On August 23, 2018 05:07 AM

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 


Jaromir Nechanicky
Replied On August 24, 2018 01:56 AM

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

Suman Kumar G [Syncfusion]
Replied On August 24, 2018 08:23 AM

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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;