Frontend assets are too big

[htdvisser]

Summary:

While working on Gzip (#350) I noticed that our static assets are very big.

Steps to Reproduce:

1. Just look in the public dir.

What do you see now?

Several MBs that users need to download when opening the OAuth page or Console.

What do you want to see instead?

Less

How do you propose to implement this?

• We can shed quite some weight by optimizing the images
• I hope @kschiffer and @bafonins have some ideas for the JS

What can you do yourself and what do you need help with?

I can submit a PR with optimized images, the rest is up to @kschiffer and @bafonins.

[kschiffer]

As far as the OAuth bundle goes, I can see that there are some dependencies attached that the OAuth app is not actually using (eg. react-select, clipboard.js). We should try looking into optimizations like tree-shaking to make sure we don't have dead code in the bundles. Especially the OAuth app should be really slim, as there is really not much happening in there.

[kschiffer]

After putting the webpack stats.json into webpack visualizer, I can see that in the OAuth bundle, a lot of space is consumed e.g. by formik and rxjs which is a dependency of redux-logic. To really reduce bundle size, we need to try and avoid big bundles which we only use marginally.

[bafonins]

The issue is with the size of the react-ace dependency. We plan do code split the payload formats/events pages to reduce the bundle size.

[htdvisser]

Looks like we're not the only ones that dislike the size of the Ace editor. Have you considered using a smaller one like https://github.com/satya164/react-simple-code-editor instead?

[bafonins]

Indeed, we can try using react-simple-code-editor.

[bafonins]

Remark for later:

We can make use of browserslist that is used internally by babel. This can reduce the bundle by removing specific polyfills for browsers we do not support. Additionally, we can define separate instances for the development and production modes to speed up the webui build.