Optimize JS bundle and try to reduce its size

[ishubin]

No description provided.

[eugef]

Hi @ishubin, if this issue is still relevant, I can take a look into it.

[ishubin]

Hey @eugef , that would be great! Honestly I don't remember all the details and I am not even sure what the acceptable client-side js bundle size is for such kind of application. I did look into this issue about a year ago and I remember that the largest library was a css processor. . Next largest one I think was lodash. I already did some optimizations to lodash by switching from global import (import _ from "lodash") to importing only the used functions (e.g. import from "lodash/forEach").

Right now the complete production bundle for Schemio is around 1.6 MB and for standalone player (without editor) - 588K. So, again, I don't know what the acceptable bundle size is for such an application. What do you think?

[eugef]

Hi @ishubin I have quickly analysed the schemio.app.drive.js bundle using webpack-bundle-analyzer tool.

The only obvious problem I've notices is indeed usage of monolithic lodash.js instead of specific lodash functions.
I think removing all import _ from "lodash" should help to reduce the bundle size by ~400-500 kb

[eugef]

I have also analysed the schemio-standalone.js bundle and it has another potential problem.

As you can see the bundle contains postcss/lib code. AFAIK postcss should only be used during the build process, so it is very strange to see its code in a runtime bundle.

[ishubin]

Thanks for the check @eugef , I thought I got rid of global lodash import. I guess I was wrong.
As for postcss I also don't understand how it gets in there. Will take a look into once I am done with electron branch.
Thanks a lot for the help!