Disable inline images for images that are less than 10,000 bytes

Thanks for this awesome project.

I recently get a warning during build telling me:

The bundle size is significantly larger than recommended.
Consider reducing it with code splitting: https://goo.gl/9VhYWB
You can also analyze the project dependencies: https://goo.gl/LeUzfb

Analyzing the project dependencies, I discovered that the easiest and most significant improvement would be to get rid of these small images under 10,000 bytes that are imported as Data URI by webpack (it’s 25% of the size of my app).

I don’t see an option to disable the feature. Does it exists? If no I have currently 2 options that are:

• moving the images in the public folder
• ejecting the app

Both options are a big loss so an option to change the current behaviour would be nice.

Thanks for your help

[edmorley]

Another point to consider when using url-loader’s inlining: small changes in either CRA’s chosen threshold, or asset sizes in an app can mean a previously working Content-Security-Policy ends up blocking newly-inlined assets due to lack of data: in the img-src CSP policy directive.

For sites that have correct long-lived cache control headers (especially those remembering to use the immutable directive), and aren’t as concerned about the initial cold cache case, IMO never inlining is preferable.

[Kizmar]

Pile on reason: I realized a .png was being added as “data:” instead of using a path. At first I thought it was the file type because the same image as a .jpg worked. I don’t want to have to add “data:” to my CSP as it’s not recommended for security reasons. I’d like to be able to basically disable this feature all together and always use the image path.