Frontend javascript files are really big

[jcgueriaud1]

Hi,

It's not a bug but if you run a webpack bundle analyzer in a vaadin application, moment js and moment timezone js will take more place than vaadin libraries (all components).

Is it possible to reduce the size of the js libraries?
Especially moment js takes 4Mb. (unpacked) because it's embedding all the locales.
fullcalendar-core takes 1.8Mb (compared to moment-js it's not that big)

Perhaps luxon could help: https://www.npmjs.com/package/luxon , https://fullcalendar.io/docs/luxon-plugin

[stefanuebe]

Hi, I'll have a look on that in the near future. Unfortunately I also think that having all the locales should not be the basic setup, it was in fact the fastest possible solution doable by me fixing another bug regarding localization.

I'll try to find a different approach, where only needed locales will be imported.

[stefanuebe]

Ok, after rereading this issue with a clearer head (don't ask for details, typical parental things :D), I get what you want.

Thought this is related to locale-all.js but now I realize it's related to moment vs luxon.

Since I personally never used the webpack bundle analyzer before, can you give me a short example of how you used it, so that I can simply re-run your analysis? Would help me to see, if it makes a difference if I implement Luxon instead of moment / moment-timezone (which takes only some KB of space on the disk, so this 4 MB confuse me).

[jcgueriaud1]

Yes of course.

It takes 3 steps in a V14+ npm project:

1. install an npm dependency: npm install --save-dev webpack-bundle-analyzer
2. modify webpack.config.json:
   const merge = require('webpack-merge');
   const flowDefaults = require('./webpack.generated.js');
   const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
   module.exports = merge(flowDefaults, {
   plugins: [
   new BundleAnalyzerPlugin({
   analyzerMode: 'static',
   openAnalyzer: true
   })
   ]
   });
3. build frontend (either in the dev mode with e.g. mvn jetty:run or in the prod mode with npm package -Pproduction). The bundle size report will open automatically.

(These steps come from Viktor :) )

[fschon]

Hi Stefan,

If it helps, here is a screenshot of my webpack bundle analysis:

[stefanuebe]

I'll try to get rid of the moment lib.

Can you test in meanwhile please how it looks like with 14.2.? In my case the libs (in dev mode) are just some hundreds of KB, not 4 MB (anymore?).

[fschon]

Hi Stefan. Thx for the support. My above webpack bundle analysis screenshot was with 14.2 production mode.

[stefanuebe]

Can you please re-check with the latest version? Should not be using moment.js at all anymore.

[fschon]

Hi Stefan,

Looks great thanks. No sign of moment.js.

I have also moved from 14.2 to 16.rc2 so the bundle analysis looks different.

[jcgueriaud1]

The bundle size has been reduced from 2.56MiB to 1.86MiB.

Thanks a lot Stefan!

[stefanuebe]

Guys, sorry, but it looks like I have to reintroduce the moment js for now. The behavior of times regarding timezones is now very buggy and I do not have the time to dig deeper into it. So easiest for now is to reuse it. I hope, that with 14.2. the 700KB is not too much to stop you from using it :(

[stefanuebe]

Reopened for later research

[jcgueriaud1]

No, it's fine. It's more a nice to have.

One other way could be to cut the vaadin bundle into pieces but there is no way to do that (not yet).

[fschon]

Hi Stefan. Will you still be getting a chance to work on this issue, or is it on the back burner? Thanks. Franz

[martinisraelsen]

This may or may not be related:

While looking for something else, I stumbled into this article that describe how size can grow if Moment.js is referenced multiple times. Don't know if this is the case or if it even applies for Vaadin components, but thought I would share.

https://medium.com/collaborne-engineering/polymer-how-we-wasted-1-5-mb-by-importing-external-libraries-wrongly-we-vulcanize-our-polyme-3534ae614454