bundle size was too large

[Hewen Bin]

here's my package, it's over 3m, but only use few module: 

Initial Chunk Files | Names | Raw Size | Estimated Transfer Size

main.2e33b9ec11144887.js | main | 3.15 MB | 589.60 kB

styles.7f92ec1d61addc0f.css | styles | 1.85 MB | 182.09 kB

polyfills.edebb4429a20d305.js | polyfills | 33.02 kB | 10.62 kB

runtime.c6af573b19e98eb9.js | runtime | 1.20 kB | 648 bytes

                              | Initial Total | 5.04 MB | 782.94 kB

and here's my app.module.ts

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser'

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { TreeGridModule, ContextMenuService, SortService, ResizeService, ExcelExportService, InfiniteScrollService, PageService, FilterService} from '@syncfusion/ej2-angular-treegrid';

import { DialogModule } from '@syncfusion/ej2-angular-popups';

import { DropDownListModule } from '@syncfusion/ej2-angular-dropdowns';

import { ButtonModule, RadioButtonModule } from '@syncfusion/ej2-angular-buttons';

import { ToastModule } from '@syncfusion/ej2-angular-notifications';

import { DatePickerModule } from '@syncfusion/ej2-angular-calendars';

import { CheckBoxModule } from '@syncfusion/ej2-angular-buttons';

import { DropDownListAllModule, MultiSelectAllModule } from '@syncfusion/ej2-angular-dropdowns';

import { AppComponent } from './app.component';

import { DialogFormComponent } from './components/dialog/dialog.component'

import { FieldErrorDisplayComponent } from './components/dialog/field-error-display.component';

import { ToastComponent } from './components/toast/toast.component'

/**@syncfusion/ej2-angular-buttons

* Module

*/

@NgModule({

imports: [

BrowserModule,

FormsModule,

ReactiveFormsModule,

ToastModule,

TreeGridModule,

DropDownListModule,

DatePickerModule,

ButtonModule,

RadioButtonModule,

CheckBoxModule,

DialogModule,

DropDownListAllModule,

MultiSelectAllModule

],

declarations: [AppComponent, DialogFormComponent, FieldErrorDisplayComponent, ToastComponent],

bootstrap: [AppComponent],

providers: [

ContextMenuService,

SortService,

ResizeService,

ExcelExportService,

PageService,

InfiniteScrollService,

FilterService,

]

})

export class AppModule { }

[Hewen Bin]

btw, i was using build commond with produciton paramter,

ng build --configuration=production

[Farveen Sulthana Thameeztheen Basha]

Hi Hewen,

We want to inform you that Grid, TreeGrid are the sophisticated UI components which are developed using multiple small ej2 components such as input, button, dropdown, popup, ect.. So, the required packages are included automatically included in the bundle file as per the dependency of the Syncfusion component imported in your application. We couldn’t avoid the dependent packages.

When the TreeGridModule alone is injected without any additional services the generated file size will be around 2 MB. This is the default size without any additional services injected. But when we go on to injecting TreeGrid services like, Filter, Page, Sort the dependencies for these services will also be included in the generated file which increases the file size. Since these three services(Filter, Page, Sort) are injected along with the TreeGrid module, the generated file size is around 2.47 mb. This will be the default size of the generated script file and it cannot be reduced.

Like consider the TreeGrid filtering service which has these filters - Filter Bar, Menu, Checkbox and Excel Filter. With this other EJ2 controls like, dropdown, checkbox, autocomplete are rendered for the Menu/Excel filter and so for this case, these control dependencies will also have to be included in the generated file. So the generated file size will depend on the injected module and services and it cannot be reduced as it only includes the injected modules.

Apart from TreeGrid component, if you have facing this (bundle size problem) on any specific component, Share us the following details.

1. In which specific component you have faced the problem.
2. Share complete code details or issue replicable sample with that component to proceed further.

Regards,

Farveen sulthana T