Large assets

[Rudloff]

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
  fonts/fa-solid-900.svg (798 KiB)
  main.bundle.js (702 KiB)
  style.bundle.js (353 KiB)
  test.bundle.js (258 KiB)

I tried to optimize fa-solid-900.svg with image-webpack-loader but it is still quite large. As for the JS bundles, we probably need to split them in smaller bundles.

[Rudloff]

I moved the CSS to a separate file and minified it, so it is now slightly better:

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
  fonts/fa-solid-900.svg (798 KiB)
  main.bundle.js (695 KiB)

[KristjanESPERANTO]

Are the seven icons in the menu the only place where Font Awesome is used? If this is the case, we could replace Font Awesome with seven small svg files or include them as inline svg in a css file.

[Rudloff]

It is used in the menu, but also on markers (with Leaflet.awesome-markers). But yes, we only use a small number of icons, so we should either replace them or only extract the icons we need from FontAwesome.

[Rudloff]

I used fontmin-webpack to only keep the icons we are actually using.

Now the only remaining problem is that main.bundle.js is still a bit big.

[KristjanESPERANTO]

Did you already gzip this file?

https://css-tricks.com/snippets/htaccess/active-gzip-compression/

[Rudloff]

Yes it is served gzipped, which means only ~180 KB are transferred to the browser instead of the full ~700 KB.