0

I am trying React-Data-Grid in the hope that the resulting bundle size will be smaller than when using ag-Grid or Tabulator which I currently use in my app.

I try it in a small component to verify the resulting bundle size. But unexpectedly, my app size increases by about 10 MB. Whereas ag-Grid or Tabulator results in an increase by "only" about 2MB. I use Laravel for backend; I don't change the webconfig.js which Laravel generated, because the default webconfig is enough for my app. The result above is when I execute the command :

npm run watch

which is provided by script generated by Laravel framework (Laravel Mix). Of course, if I run production mode by executing command :

npm run prod

the whole size becomes much smaller.

Is this size increase normal for React-Data-Grid ? If so, I will just ignore this library, and stick to ag-Grid and Tabulator which are feature-rich, despite their relatively large bundle size. If not, I want to know what may cause this.

Code Splitting will be the last resort when I cannot reduce the bundle size as a result of using 3rd party libraries.

Lex Soft
  • 2,308
  • 2
  • 13
  • 13

1 Answers1

0

It's big indeed, however if you use lazy loading your project becomes manageable.

Just as a reminder you can use : 

const gridList = React.lazy(() => import('./components/gridlist/gridlist'));

And put your DataGrid inside that component. DataGrid has a lot of very nice features when it comes to sorting and filtering, and it's free.

Tibo
  • 621
  • 1
  • 8
  • 24