Importing Required Syncfusion Angular components to reduce bundle size
Importing Required Syncfusion Angular components to reduce bundle size
To use Syncfusion Angular Components, we need dependencies syncfusion-javaScript, jQuery and Jsrender.
The Syncfusion Angular components supports module loading. Since while importing EJAngular2Module from ej-angular2 package, it automatically loads its dependencies from npm:syncfusion-javascript package, this may cause bundle size bigger.
To reduce the bundle size import, required Angular components from ej-angular2 package, so that the bundle size will be reduced.
import { NgModule, enableProdMode, ErrorHandler } from '@angular/core'; . . . . .
import { EJ_BUTTON_COMPONENTS } from 'ej-angular2/src/ej/button.component';
import { AppComponent } from './app.component'; import { HomeComponent } from './home/home.component'; import { ButtonComponent } from './button/button.component';
import { rootRouterConfig } from './app.routes';
@NgModule({ imports: [ BrowserModule, FormsModule, HttpModule, RouterModule.forRoot(rootRouterConfig, { useHash: true }) ], declarations: [ AppComponent, HomeComponent, ButtonComponent, EJ_BUTTON_COMPONENTS ], bootstrap: [AppComponent] }) export class AppModule { }
|
The table depicts calculated build bundle size for importing ej-angular2 module.
Scenario | Bundle size (in KB) |
Before importing ej-angular2 package | 86
|
Importing EJAngular2Module from ej-angular2 package. | 11672
|
Importing required components.
For example, ejButton component from ej-angular2 package.
| 132 |
