Premium support for our pure JavaScript UI components


Post by rapiduser »

I am using the @bryntum/gantt and @bryntum/gantt-react modules which are pulled from Bryntum NPM repo. The total bundle size is quite large. I am not sure if it's due to the way we import certain things from the library or if there are some configurations we can do to help reduce the size?

Right now it's 8MB.

Are there any ways to only pull in only what is needed or any tips that we can do to help reduce size?


Post by alex.l »

Hi rapiduser,

NPM bundle contains all the source code, we cannot predict what exactly you want, so the only way is to deliver a full package. Btw, prod version will be much lighter.
But there is a way to use the source code from the CustomerZone instead and build your own bundle with only the classes you need. It's a bit hard way and requires some extra work, but I am afraid the only way to reach your goal here.
Btw, react (or any other framework) wrappers requires a bundle and won't work out of the box in case of using "source code" approach. They import from umd bundles. You'll have to update them too.

All the best,
Alex


Post by rapiduser »

alex.l wrote: Tue Dec 07, 2021 8:48 am

Hi rapiduser,

NPM bundle contains all the source code, we cannot predict what exactly you want, so the only way is to deliver a full package. Btw, prod version will be much lighter.
But there is a way to use the source code from the CustomerZone instead and build your own bundle with only the classes you need. It's a bit hard way and requires some extra work, but I am afraid the only way to reach your goal here.
Btw, react (or any other framework) wrappers requires a bundle and won't work out of the box in case of using "source code" approach. They import from umd bundles. You'll have to update them too.

Hi Alex

We are using the production version. Using the source code from the CustomerZone would mean that we would have to potentially customize our bundle every time we want to upgrade a version ?

Are there any plans to separate the modules out into smaller packages to consume for NPM production versions?

I believe Matt had said that version 5.0.0 will have some updates to reduce bundle sizing? Do you have any insight on what that entails?


Post by johan.isaksson »

Hi,

Version 5.0.0 will include "thin" bundles, that will reduce the total footprint when using multiple Bryntum products in the same app. But it wont reduce bundle size when using a single product.

To reduce the size of your app, you should instead import directly from sources rather from a bundle. That way your build process can pull in only whats needed. The sources are part of the npm package, in the source folder.

Something like this (actual path might not be correct):

import GanttBase from '@bryntum/gantt/source/lib/Gantt/view/GanttBase.js'

(Have to include each module separately compared how to it is done with bundles)

UPDATE: This approach will unfortunately not play well with the React wrapper. Something we hope to address in the future.

Best regards,
Johan Isaksson

Post by rapiduser »

johan.isaksson wrote: Tue Dec 07, 2021 4:46 pm

Hi,

Version 5.0.0 will include "thin" bundles, that will reduce the total footprint when using multiple Bryntum products in the same app. But it wont reduce bundle size when using a single product.

To reduce the size of your app, you should instead import directly from sources rather from a bundle. That way your build process can pull in only whats needed. The sources are part of the npm package, in the source folder.

Something like this (actual path might not be correct):

import GanttBase from '@bryntum/gantt/source/lib/Gantt/view/GanttBase.js'

(Have to include each module separately compared how to it is done with bundles)

UPDATE: This approach will unfortunately not play well with the React wrapper. Something we hope to address in the future.

So this approach will not work I assume?

I get the following error when attemping to import TaskStore directly from source.

Could not find a declaration file for module '@bryntum/gantt/source/lib/Gantt/data/TaskStore'

I also see that you updated your answer with regards to the React wrapper.


Post by johan.isaksson »

Yes "unfortunately" the wrapper imports from the bundle, so importing directly from sources wont help as long as the wrapper is used. We will have to come up with some better approach for that, but wont be able to do so for 5.0.

So as it stands the only somewhat realistic way to save on the bundle size is to not use the React wrapper and import directly from sources. Which will require a fair amount of work...

Sorry to not have better news!

Best regards,
Johan Isaksson

Post by rapiduser »

johan.isaksson wrote: Tue Dec 07, 2021 9:05 pm

Yes "unfortunately" the wrapper imports from the bundle, so importing directly from sources wont help as long as the wrapper is used. We will have to come up with some better approach for that, but wont be able to do so for 5.0.

So as it stands the only somewhat realistic way to save on the bundle size is to not use the React wrapper and import directly from sources. Which will require a fair amount of work...

Sorry to not have better news!

Thanks.

Would you happen to know if dynamic gantt loading is still on the radar for Q1 of 2022 and if yes, how it will function?


Post by johan.isaksson »

Could you please elaborate, what do you mean with dynamic gantt loading?

Best regards,
Johan Isaksson

Post by rapiduser »

johan.isaksson wrote: Wed Dec 08, 2021 4:52 pm

Could you please elaborate, what do you mean with dynamic gantt loading?

Dynamic data loading.

Right now the Gantt requires the entire data set to load the chart but in some cases performance can be impacted if there are thousands upon thousands of tasks. Not to mention tasks having a bunch of dependencies.

I remember there were discussions that dynamic data loading was something in the pipeline or had been discussed within your team. Was wondering if there was a solution or update as to if this is going to be supported in the near future?


Post by johan.isaksson »

Hi,

Understood, but unfortunately that is not something that will be supported in the near future.We plan to add dynamic data loading (during 2022) in Grid and Scheduler, but for Gantt it is not as "easy". Gantts calculation engine requires access to all tasks to calculate the full project, making it currently impossible to load on demand.

We are investigating the option of running the engine on the backend, streaming changes back and forth. That would open up for dynamic data loading, but work has not yet begun.

Best regards,
Johan Isaksson

Post Reply