Ag-grid bundle size is too big

13
votes

I am developing a web application with Angular 6. I have an Ag-grid enterprise edition. Ag-grid documentation says, that we have to import all ag-grid-angular, ag-grid-community, and ag-grid-enterprise to work with Ag-grid enterprise.

After compiling, the total main bundle size crosses 1.5 MB. In that ag-grid-community is 694KB and ag-grid-enterprise is 230 KB:

Bundle size image

Is this the normal behavior of Ag-grid?

I am using Ag-grid version 19.0.0 and the following command for building:

ng build --prod --aot --build-optimizer --vendor-chunk=true
2
angularbundleag-gridenterprise
did you find any work around / solution .? – Mohit Jain

2 Answers

7
votes

This is something that we know and we have in our backlog

Project structure improvements AG-1329 Reduce grid bundle size (via tree shaking)

You can see our pipeline here:

https://www.ag-grid.com/ag-grid-pipeline/

Note that we don't have any plans to do any improvements any time soon given its comlexity, but we are hoping to eventually be able to provide with a small bundle

I would recommend that if you are a customer, that you contact ag-grid support directly for more information

Hope this helps

2
votes

The item AG-1329 Reduce grid bundle size Alberto has quoted above has been implemented as part of ag-Grid v22, released in November 2019. This added the option to import ag-Grid via modules that contain different aspects of ag-Grid functionality. This allows you to only import the modules for the functionality you're actually using, thus decreasing the ag-Grid bundle size.

This approach is covered in detail and the list of modules you can import are shown here: https://www.ag-grid.com/documentation/javascript/modules/

We built a Vue project with ag-Grid to illustrate this approach using only the modules below: @ag-grid-community/core and @ag-grid-community/infinite-row-model Please download this sample Vue project here: https://1drv.ms/u/s!AljcY8dewwaBnFPXn7V9eNjNM-wX?e=h8TnD0

This sample project above has a bundle size of only 1.0MB compared to the 1.8MB for the full ag-Grid package using all the ag-Grid enterprise functionality.

You can verify the resulting bundle size by running the command below for the attached Vue project: npm i && npm run build && npm run build:report

Please follow this approach to load only the ag-Grid modules you're using to reduce bundle size. You can see the full list of modules here: https://www.ag-grid.com/documentation/javascript/modules/