search

nimiq / vue-components

Vue component library for Nimiq ecosystem apps.
https://nimiq.github.io/vue-components/
Apache License 2.0
17 stars 4 forks source link

Use bundled Iqons SVG #84

Closed sisou closed 4 years ago

sisou commented 4 years ago

I manually shrinked all Iqons source SVGs to be their minimal size. The new iqons.min.svg is now 88kb (was 110kb before). The bundled SVG is even smaller, because I am using find-replace for larger string portions in the build step, which get reversed when the file is loaded. Thus the bundled Iqons lib is only 87kb (thats including the Iqons source code!).

I suggest to use the bundled Iqons by default, which removes the need to always load the Iqons SVG separately in projects (no more need to remember and configure the file-loader for the Iqons SVG).

The vue-component bundle gets bigger this way, but therefore no additional request for a bigger separate svg sprite is required.

What do you think?

danimoh commented 4 years ago

The reduction from 110kb to 88kb is a great change!

I'm not so sure though whether the other changes are really beneficial. Are you sure the string replacements are making a real difference when taking gzip compression into account? With the replacement undoing code we might end up with a similar file size (gzipped) but added complexity + run time cost for the multiple replacement passes.

And I did like the fact that the asset got lazy loaded instead of bundled.

sisou commented 4 years ago

According to https://www.giftofspeed.com/gzip-test/ using JSDelivr CDN (which has Brotli compression enabled), these are the sizes:

File Original Size Brotli
iqons.min.js 4.8 KB 2.1 KB
iqons.min.svg 86.0 KB 27.5 KB
iqons.bundle.min.js 85.2 KB 29.9 KB

So the separate files are 29.6 KB over the wire (plus an additional HTTP roundtrip), while the bundle is 29.9 KB. :sunglasses:

I guess we'll not use the bundle then :smile:

sisou commented 4 years ago

I updated the @nimiq/iqons package to 1.6.0, without changing how the Identicon component works in 4ae0e0a9df28e7e1d05d44ba8ede57553be633e3.

However, I still think that having a version of the Identicons where users don't have to worry and know about importing the SVG file separately greatly improves developer experience. I'll think about adding a second Identicon component, which uses the bundled SVG.