Ignite: Is auto-requiring all images ideal from a performance viewpoint?

[pekkanikolaus]

The intended way to add new images to an Ignite project is to copy them to the Images/ directory, add them to Images.js and then use Images.variablename in the app itself.

That's very nice and tidy, but if I understand it correctly that leads to all image resources being loaded into the app every time it runs, regardless of whether an image is actually used or not.

Could this have an effect on performance with larger images?

Or does it not matter because the images would be loaded into memory anyway just by being bundled into the project?

[GantMan]

Such an awesome question!

I think this matters on how images (an the magic of images) is handled. Because we're not sure if it follows normal javascript conventions anyway. Are images read from disk when they are required? Or are they stored in memory anyway?

Honest answer is I don't know, and I believe the answer isn't simple. We've never seen a performance issue from this method, but now I'm interested in checking into it!

@leonskim - do you have any idea how this really works on Android?
@kevinvangelder - on windows?
@skellock - on iOS?

Or do any of you know what tool (other than digging through native) we can use to heuristically be sure?

[skellock]

I'm not entirely sure. Since they're JavaScript bundled, they'll have to cross the bridge into native. At that point they're probably cached, but they have to travel via string (probably base64).

This does seem like it could be an issue, I just don't know exactly when things turn from haste modules into memory into native.

I'd love to get an answer on this too.

[jamonholmgren]

I tried an experiment tonight where I "lazy-loaded" images in a getter. The code was fairly simple:

const images = {
  logo: '../Images/ir.png',
  clearLogo: '../Images/top_logo.png',
  // .. etc
}

const lazyImages = {}
Object.keys(images).forEach((key, index) => {
  let cached
  lazyImages.__defineGetter__(key, () => {
    if (cached) return cached
    cached = require(images[key])
    return cached
  })
})

export default lazyImages

Unfortunately, require doesn't really work like that, I guess.

[skellock]

This works for node, but React Native's bundle system is uh.... different. Thanks for exploring!

[jamonholmgren]

Because of React Native limitations, there's not a great way to get around this.

However, you can probably use something like react-native-fast-image. We should consider adding it to Bowser.

[jamonholmgren]

This is more of a Bowser thing, so I'm closing here.