Ag-grid bundle size is too big

Question

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:

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

Answer 1

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

Answer 2

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/

Answer 3

There's an in-depth blog about this topic in the official documentation page.

Minimising Bundle Size

Basically, we use modules instead of packages. By doing so, we will include only what we need.

E.x. This is a react example but main logic is same for angular and vue as well.

In your package.json, instead of this

"ag-grid-community": "^27.0.1",
"ag-grid-react": "^27.0.1",

use this

"@ag-grid-community/core": "^28.1.0",
"@ag-grid-community/react": "^28.1.0",
"@ag-grid-community/client-side-row-model": "^28.1.0",
"@ag-grid-community/styles": "^28.1.0",

and in your page, change your import from this

import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';

to this

import { AgGridReact } from '@ag-grid-community/react';
import '@ag-grid-community/styles/ag-grid.css';
import '@ag-grid-community/styles/ag-theme-alpine.css';

import { ModuleRegistry } from '@ag-grid-community/core';
import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';

ModuleRegistry.registerModules([
    ClientSideRowModelModule,
]);