Stephen Cooper for AG Grid

Posted on Feb 10, 2022 • Edited on Jul 2 • Originally published at blog.ag-grid.com

AG Grid: Minimising Application Bundle Size

#performance #javascript #tutorial

In this post, we are going to demonstrate how you can minimise your application bundle size when working with AG Grid. This can be important if you want to improve your page load times, especially over slower networks. We will also detail the simplest way to include AG Grid if bundle size is not a particular concern to your application, i.e your application is only served over a high-speed internal network.

Update v32

Please ensure you have updated to v32 as just using v32 over v31 can result in bundle size reduction of 10-20% for AG Grid.

AG Grid Terminology

Before we start it's important to cover our AG Grid terminology to avoid confusion when reading our documentation of this post. For including AG Grid in your application we refer to packages and modules as two alternative methods. These terms are overloaded and have nothing to do with how the code is published or consumed by you. Don't confuse these terms with the different Javascript module formats such as CJS, ESM, UMD...

By packages, we are referring to the npm packages ag-grid-community and ag-grid-enterprise which contain all the community/enterprise features respectively. Think of them as all the AG Grid features packed up into a single package, hence the term package. They have everything packed in and are ready to go. Packages Overview

By modules, we are referring to all the scoped npm packages matching @ag-grid-community/*** or @ag-grid-enterprise/*** (i.e @ag-grid-enterprise/row-grouping). These are all the individual grid features packed up into their own packages. We have modularised the grid features into separate modules so that you can only include what you need. Modules Overview

How to Minimise your Bundle Size

If you want to minimise your bundle size then you should use AG Grid Modules to only include code for the features that your application requires. For example, your application may not need to export files to Excel, so let's not include the code to support this.

AG Grid Modules

The first step of working with Modules is to decide which modules you need for your application. This documentation page lists every feature module supported by AG Grid.

If it is not clear from the name alone then you can also see which modules are required for a particular code example by selecting the 'Module' option. Then view the source code and you will see the required modules being imported.

For this post lets say that our application only requires the following features:

All data is loaded to client (ClientSideRowModel)
Group data with aggregations (RowGroupingModule)
Filter rows using the Set Filter (SetFilterModule)

Install Require Modules

The first step is to import the npm packages for each of the modules listed above. Our package.json file should only include the following AG Grid packages.

"dependencies": {
    "@ag-grid-community/client-side-row-model" : "^27.0.0",
    "@ag-grid-enterprise/row-grouping" : "^27.0.0",
    "@ag-grid-enterprise/set-filter" : "^27.0.0",
}

Make sure you have not accidentally included any other AG Grid package, especially not ag-grid-community or ag-grid-enterprise when working with modules as they will dramatically bloat your bundle size!

If you are working with a framework then you will also include the relevant framework module, i.e one of @ag-grid-community/angular, @ag-grid-community/react or @ag-grid-community/vue3.

You may have noticed that we have not explicitly included the module @ag-grid-community/core in our package.json but it will still be installed as a dependency of our modules. You are free to include it as you may find it is required for some linting tools.

Registering Modules

Now that we have installed our modules the next step is to register them in our application with AG Grid. There are two ways to achieve this. You can either register them globally via the ModuleRegistry or pass them to a grid instance which will register them globally on your behalf. See Registering AG Grid Modules for the full instructions/framework-specific details.

Here is the code to globally register the modules. Make sure this code runs before you instantiate any of your grids otherwise they will complain about the modules not being available.

import { ModuleRegistry } from '@ag-grid-community/core';
import { ClientSideRowModelModule } from "@ag-grid-community/client-side-row-model";
import { RowGroupingModule } from "@ag-grid-enterprise/row-grouping";
import { SetFilterModule } from "@ag-grid-enterprise/set-filter";

ModuleRegistry.registerModules([
    ClientSideRowModelModule,
    RowGroupingModule,
    SetFilterModule
]);

That's it. Your grids are set up to be able to use row grouping and set filtering along with all the other core features of the grid.

Missing a Feature Module

A common fear that people have when working with modules is that they will not know exactly which modules they should include. In the majority of cases, AG Grid will warn you if you have enabled a feature but have not provided the required module. For example, if you add the rowGroup flag to your column definition but have not included the RowGroupingModule then you will see the following console warning.

 AG Grid: rowGroup is only valid with AG Grid Enterprise Module @ag-grid-enterprise/row-grouping - your column definition should not have rowGroup

The main exceptions to this rule are the SetFilterModule and MenuModule. If the SetFilterModule is present then the default filter becomes a set filter instead of the simple text filter. Likewise, if the MenuModule is present then right-clicking the grid will bring up the grid's context menu instead of the browser menu.

If you are converting from packages to feature modules make sure to exercise all the features you want to ensure you are not missing a required module.

Packages: I just want all the features

If minimising your application bundle size is not a priority then you should prefer AG Grid packages. Using the packages ag-grid-community and ag-grid-enterprise is comparatively simple. Your package.json file will only ever contain these dependencies, (plus your framework package, ag-grid-angular, ag-grid-react, ag-grid-vue3);

"dependencies": {
    "ag-grid-community" : "^27.0.0",
    "ag-grid-enterprise" : "^27.0.0",
}

The only other step is to import the enterprise package to enable all the enterprise features in one go.

import `ag-grid-enterprise`;

That's it! There is no need to register any modules as the packages do this for you. As you can see this makes for a much simpler developer experience and means that any new features will immediately be available to your application.

For example, the recently added Sparklines feature will be ready to use with no build changes unlike with modules where you will need to add the module to your package.json file and remember to register it too.

Module vs Package Bundle Size

To give some concrete figures to our example we set up a grid with the above features in two React applications, one using Packages and one using Modules. As you can see only including the features that we require led to a 43% reduction in the final application bundle size.

	Modules	Packages	% Reduction
Compressed main.js	300 kB	520 kB	43%

Packages Bundle Size

> react-package@0.1.0 build
Creating an optimized production build...
File sizes after gzip:
  520.0 kB  build/static/js/main.3c41a45e.js
  27.77 kB  build/static/css/main.2e8b3952.css
  1.79 kB   build/static/js/787.20674135.chunk.js

Modules Bundle Size

> react-modules@0.1.0 build
Creating an optimized production build...
File sizes after gzip:
  300.0 kB  build/static/js/main.d50bef7e.js
  28.1 kB   build/static/css/main.f1ce7d1f.css
  1.78 kB   build/static/js/787.eaa7384c.chunk.js

Feel free to experiment yourself using the AG Grid Bundle Size Github Repo which has package vs module applications for Angular, React and Vue.

The reduction you can achieve for your application will of course depend on the number of features that you require so if you are concerned with bundle size it may be worth experimenting.

Note on the All Modules Bundles

When searching npm you may come across the packages @ag-grid-community/all-modules and @ag-grid-enterprise/all-modules and wonder what these are. These are provided for backwards compatibility but are no longer recommended. They are wrappers that include all other modules but do not register them for you like their corresponding packages. They are not currently tree shakeable so even though you may only import one or two features you will still end up with all the code being included.

If you are using either of these modules we would recommend that you either switch to use packages and your bundle size should not be impacted. Alternatively, audit which features you require and just import and register those modules which will result in a reduced bundle size for your application.

Conclusion

We have seen how you can reduce your application bundle size by only including the AG Grid features that your application requires. This does require more developer effort so do consider if it is 'worth it' for you otherwise just enjoy the simplicity and full feature set of our packages.

For more details view the Build section of our documentation.

DEV Community