search

nusu / avvvatars

Beautifully crafted unique avatar placeholder for your next react project
https://avvvatars.com
MIT License
1.82k stars 81 forks source link

How much does it weight? 100kb? #12

Closed mikhael28 closed 2 years ago

mikhael28 commented 2 years ago

Would you please detail the exact weight in kb of the package? You say under 100kb... but if you have even 50kb for a package like this, it's too much. Does your app support treeshaking, if it only uses 1 or 2 of the graphical assets? 100kb is huge.

All that being said, your package looks really well done - bravo!

AntoineKM commented 2 years ago

Would you please detail the exact weight in kb of the package? You say under 100kb... but if you have even 50kb for a package like this, it's too much. Does your app support treeshaking, if it only uses 1 or 2 of the graphical assets? 100kb is huge.

All that being said, your package looks really well done - bravo!

image

You might be interested by this extension: https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost

mikhael28 commented 2 years ago

Thank you for the suggestion - I've installed it! As a friendly piece of feedback, I really think you should consider tree shaking this package a little bit more. Let's say, for example, that I JUST wanted the simple Circle avatar, with first initial and last name initial. (ML) for example, with a couple of different colors. I can create my own reusable component for that, with some raw html and JS to get the first Index value of each name, and randomly generates a color. That all costs <1kb - to go from that, to adding 60kb, is asking a lot from performance focused developers. If I wanted to import one or two of the other assets from your library, I really hope that it wouldn't take 60kb - maybe something like 10 or 20kb, depending on the graphical assets. You can compress those things down a lot, though I'm sure you have already done a great job with managing the assets themselves - I would simply try to support tree shaking as much as possible.

As an FYI, I exclusively write client side JavaScript code, and I don't believe you can GZIP a client side bundle - can you? It's only available from server side, no? Because 20kb Gzipped is pretty awesome.

mikhael28 commented 2 years ago

Anyway, no one cares what I think - really great job with the library so far!

nusu commented 2 years ago

Hi @mikhael28 thanks for the kind words, the library doesn't support tree-shaking at the moment but it could be implemented in the future.

There are a couple of ways to enable gzip compression for the client-side like using NGINX, or from Cloudflare, you can also achieve this by webpack configuration but I'd prefer Cloudflare or something similar in production.

Also as much as it seems heavy, I think it's not compared to the alternative, which is firing a bunch of requests to grab a png avatar from a CDN, which will definitely cost much higher than this library.

But yeah there is always a room for improvement, I'm currently loaded to my head on my personal projects but will take a look into it in the future