Our pure JavaScript Scheduler component


Post by mils »

Hi Support,
I'm upgrading scheduler component in my application to version 4.1.0.
I noticed that the bundle size now is very big.
If I open your angular example "angular-7" of the previous version 4.0.x and launch "ng build --prod" the bundle size is about 2.500 Kb (not so small at all).
If i build the same "angular-7" example of the version 4.1.0 the bundle size is about 3.600 Kb.

Is there a way to make the bundle size smaller?


Post by saki »

I have tried to compile angular-7 demo both in 4.0.8 and 4.1.0 versions and the differences are approximately same as yours. My bundles were 2.6MB vs 3.7MB. The increase is caused by adding more code in the new version.

However, there would be a way to decrease the size of the bundle and that would be upgrading version of Angular. I have tried to build our recurring-events demo that uses Angular 9.1.13 and the bundle size was 2.8MB. Gantt example rollups on Angular 10.2.4 built into 3.18MB bundle (Gantt is has more code than Scheduler).

Therefore, I'd suggest to upgrade Angular, at least to version 9 and the bundle size should decrease. This is most likely caused by better code optimization and/or more aggressive (clever?) tree shaking in the newer Angular versions.


Post by mils »

Thanks for your time Saki,
I use Angular 11 in my application but I had to disable the option buildOptimizer because there were come problems
when deploying to the production web server, I found some topic here confirming the issue.
I confirm that if I build with the optimization enabled the bundle size is about 2.800Kb.
Is the buildOptimizer issue fixed?

Best Regards


Post by alex.l »

Hi mils,

Yes, we've fixed buildOptimizer and it works in all our examples. But actually we don't have an example for angular 11. Could you please try it with your application, it should work too.

Al the best,
Alex

All the best,
Alex


Post by mils »

Hi Alex,
I still get an error when I build with buildOptimizer=true:

ERROR TypeError: Cannot read property 'some' of undefined
    at i.value (7-es2015.bab2db6b0005ecbe1af8.js:1)
    at i.value (7-es2015.bab2db6b0005ecbe1af8.js:1)
    at i.value (7-es2015.bab2db6b0005ecbe1af8.js:1)
    at i.set [as eventsData] (7-es2015.bab2db6b0005ecbe1af8.js:1)
    at i.set (7-es2015.bab2db6b0005ecbe1af8.js:1)
    at i.value (7-es2015.bab2db6b0005ecbe1af8.js:1)
    at i.value (7-es2015.bab2db6b0005ecbe1af8.js:1)
    at i.value (7-es2015.bab2db6b0005ecbe1af8.js:1)
    at i.value (7-es2015.bab2db6b0005ecbe1af8.js:1)
    at i.value (7-es2015.bab2db6b0005ecbe1af8.js:1)

The error raises when I open the second time the route that point to the component that reference the scheduler.
Everything's ok without the optimization enabled.

Best Regards


Post by saki »

Would you post please a showcase? The simplest Scheduler with routing that triggers it?


Post by mils »

If I create a new project from the scratch everything works fine, even with optimization enabled.
The problem is in my main project, that I can't attach or reduce to a showcase :-(
This is the function causing the error, I can intercept it from the browser debugger:

{
                            key: "cancelBatch",
                            value: function() {
                                this.batching = null,
                                this.meta.batchChanges = null
                            }
                        }, {
                            key: "triggerBeforeUpdate",
                            value: function(e) {
                                var t = this;
                                return !this.stores.some(function(n) { 		// error is here (this.stores is undefined)
                                    return !1 === n.trigger("beforeUpdate", {
                                        record: t,
                                        changes: e
                                    })
                                })
                            }
                        }, {

Post by saki »

The above code comes from the very core class Core/lib/Core/data/Model.js. I doubt that the code itself would be buggy as we run thousands of tests before release so a bug would be revealed by them. I think it is what Angular optimization does with the code.

A possible approach would be to compare relevant config files of the newly created project with the files of the existing project, namely:

  • package.json - especially the versions. Sometimes changing ^ to ~ can make/break things
  • angular.json
  • tsconfig*.json

Also the brute force of

npm cache clean --force
rm -rf node_modules package-lock.json dist
npm install
npm start

may help.

The last resort would be to copy files from the existing project into the workable newly created project.


Post by mils »

Thanks a lot Saki,
I'll give it a try, but it doesn't seems that easy :-(

Best Regards


Post by mils »

I was wrong, the error didn't happen in my showcase just because I didn't add any event to the scheduler.
Adding some events I was able to replicate the problem, you can find the showcase in attachment.
Without the optimization everything works fine.

Best Regards

Attachments
Scheduler41ShowCase.zip
(148.61 KiB) Downloaded 90 times

Post Reply