Very large images are loaded upon mount about vue-tel-input HOT 11 CLOSED

@jdhartley thanks for the suggestion, we will have this in the next release very soon!

from vue-tel-input.

Great to hear Steven! Please let me know if I can help in any way

from vue-tel-input.

@iamstevendao Hey Steven! Any update on this ticket?

from vue-tel-input.

@jdhartley Thanks for baring with me, v2.0.2 published along with the fix for this issue.
Demo: https://educationlink.github.io/vue-tel-input/

from vue-tel-input.

Although it's still not the best solution, I used the same sprite as the react repo you commented. However, I pointed the image to the static URL link (you can find it at src/assets/sprite.css), which is not a good practice.
We might need to change it later, every contribution is always appreciated.

from vue-tel-input.

Fantastic! Thank you for this update. It has a huge impact on our app's performance.

Would love to chat through options on how we might be able to use our own CDN instead of serving off of GitHub. My fear with using that particular url is its linked to master, so if that image ever changes, people using old versions of the Sprite CSS will run into issues. It may be good to lock to a specific commit sha instead of master, or like in /dist/, add a sha to the filename.

Edit: example of link with commit sha: https://raw.githubusercontent.com/EducationLink/vue-tel-input/c3103c72a17350c2ba4d0d2ad6ff2c1e5727c58e/src/assets/flags.png

from vue-tel-input.

Would splitting up the flags into individual files help?

from vue-tel-input.

@ajmas would you be able to give it a shot? As long as it won't increase the size of all flag images it needs to load.

from vue-tel-input.

@iamstevendao if I have a bit of time. My next few days aren’t going to allow me to look. I encourage anyone who has a bit of time to look too. Maybe compare what other telephone widgets are doing too, even if they are angular or react based?

from vue-tel-input.

Would splitting up the flags into individual files help?

It would help performance if both:

• the site is only specifying a subset of the available countries (possibly true in some cases).
• the images are being requested from an HTTP/2.0 server that can multiplex lots of small files together efficiently in the response. Note that this is currently false for content served from raw.githubusercontent.com, which does not support HTTP/2.0.

In all other cases it will actually hurt perfomance, by ballooning the number of HTTP requests for the same content. This is why image spriting was invented in the first place.

A more flexible, possibly better solution would be a refactor allowing the developer to point to their own image resource(s), with the githubusercontent URL as a default. There could be a root path supplied as a prop, for example, and a toggle for whether the images are supplied as a sprite or as separate images.

Note that all of these refactors are breaking, which makes it all the more important to get the image URL in master to point to a specific commit SHA, as @jdhartley suggested. Otherwise updates will break things.

from vue-tel-input.

Maybe to allow the images URL to be a configurable option would be a first step? While it doesn’t solve the issue outright, it does allow for a short term solution, for anyone not wanting to point a CDN they don’t control.

from vue-tel-input.