[ANGULAR] Issues with bundle size

[annaj]

Hi, the addition of Bryntum into our product has significantly increased our bundle size, accounting for around 1MB GZipped. (Without Bryntum it is 3.8MB GZipped, with Bryntum 4.7MB). It is causing some problems such as slowing down builds locally and in CI/CD, as well as memory issues.

We are looking at ways to reduce the size and have read through https://bryntum.com/products/grid/docs/guide/Grid/build-production#performance-optimization

We are using Angular so it is not ideal for us to import the vanilla JS files individually. To use the <bryntum-gantt> component we need to add BryntumGanttModule to our imports and that seems to declare every single Bryntum component there, whether they are needed or not. We are using Webpack and I can't tell whether the unused code is getting tree shaken out, or whether it's there bloating the build.

Any advice would be greatly appreciated.

[marcio]

Hey annaj,

Thanks for reaching out.

One way that you could try is to use thin packages and import only the code that you need from Gantt (and other components from Core/other packages that you may use). Please check this guide for more information https://bryntum.com/products/gantt/docs/guide/Gantt/integration/angular/multiple-products#thin-packages-overview.

[annaj]

Thank you for your reply Marcio,

We've made an attempt to use your thin files. This is what we have in the package.json:

    "@bryntum/core-angular-thin": "6.1.5",
    "@bryntum/core-thin": "6.1.5",
    "@bryntum/engine-thin": "6.1.5",
    "@bryntum/gantt-angular-thin": "6.1.5",
    "@bryntum/gantt-thin": "6.1.5",
    "@bryntum/grid-angular-thin": "6.1.5",
    "@bryntum/grid-thin": "6.1.5",
    "@bryntum/scheduler-angular-thin": "6.1.5",
    "@bryntum/schedulerpro-angular-thin": "6.1.5",
    "@bryntum/scheduler-thin": "6.1.5",
    "@bryntum/schedulerpro-thin": "6.1.5",

When we start the app though we are getting this error:

./node_modules/@bryntum/gantt-thin/lib/data/TaskStore.js:35:74-87 - Error: export 'default' (imported as 'PartOfProject') was not found in './mixin/PartOfProject.js' (module has no exports)

./node_modules/@bryntum/gantt-thin/lib/model/TaskModel.js:67:58-71 - Error: export 'default' (imported as 'PartOfProject') was not found in '../data/mixin/PartOfProject.js' (module has no exports)

I checked the node modules and './mixin/PartOfProject.js' has the following code:

import { default as default2 } from "@bryntum/schedulerpro-thin/lib/data/mixin/PartOfProject.js";
export {
  default2 as default
};

@bryntum/schedulerpro-thin is in the list of dependencies, the "@bryntum/schedulerpro-thin/lib/data/mixin/PartOfProject.js" file is there, I'm not sure why it is erroring. Nothing obvious stands out to me.

Thanks,

Anna

[marcio]

Hey Anna,

We'll need more context regarding how you are configuring your project. Could you please share a runnable test case for us to inspect/debug?

Are you using the correct import when configuring your Task Store? (Using from the same product thin bundle, for example: Using TaskStore from Gantt and setting on the Gantt component).

[annaj]

Hi Marcio,

Thank you for your reply.

I tried to recreate the compile error for you but encountered some strange behaviour. I managed to get it to build in the end so let's shelve that issue for now.

I mostly wanted to check if thin files would improve the bundle size. I think I have followed the instructions correctly. However it doesn't seem to have improved it, if anything it increased it a bit. I'm attaching an image of the before and after of my attempt to use the thin files. I've got which npm packages I had as well as which angular modules I added to the imports next to the resulting bundle. I only added the angular modules listed as required for Gantt https://bryntum.com/products/gantt/docs/guide/Gantt/integration/angular/multiple-products#modules-configuration

Before and After

Is this expected?

Kind regards,

Anna

[alex.l]

Hi Anna,

Thin bundles created to not repeat the code when you use few products in one app. In your app I see you added all existed packages of Bryntum, so how should it decrease the size if you attached all the library.
Are you really use all components in your app? As I see from the context of this topic, you only need a Gantt?

I only added the angular modules listed as required for Gantt

If you followed the instructions and added only Gantt related packages, that's all you can do to decrease the size, I am afraid.

[annaj]

I asked how we could reduce our bundle size and the reply was:

"One way that you could try is to use thin packages and import only the code that you need from Gantt"

Reading the docs I was starting to suspect what you were saying was the case but I needed confirmation, especially since that was the solution your team gave us.

Our assumption was that the thin files would be more optimised for tree shaking. So just to confirm, if I need the full BryntumGantt then I am forced to include BryntumGridModule (amongst the others). Does that mean that all of the BryntumGrid code gets added to the package, even if there are lines there that will never get touched? Is your library tree-shakable?

[alex.l]

Hi,

Yes, when you import package, it will be fully added. That's why we created thin packages.