Make the threshold whether assets should be inlined configurable for prod builds

[rogierslag]

For sites which have a large number of images, each of which has a lower probability of being seen,
combined with assets which rarely change, the other situation was inconvenient. Users were forced
to download the same assets over and over again for unrelated changes.

Apart from that, since each image has a low probability of being loaded, aggressively loading all
images is counterproductive.

By making the threshold configurable, but respecting the same default value, developers can use
techniques as lazyloading images when applicable (which cannot be done if they are part of the bundle)

Refs #3437

[facebook-github-bot]

Thank you for your pull request and welcome to our community. We require contributors to sign our Contributor License Agreement, and we don't seem to have you on file. In order for us to review and merge your code, please sign up at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need the corporate CLA signed.

If you have received this in error or have any questions, please contact us at cla@fb.com. Thanks!

[facebook-github-bot]

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks!

[rootux]

Hey @rogierslag This is great. We need it for our project as well. Can you fill the robot request @facebook-github-bot ? So it can accept your code? 🤖

[rogierslag]

I did already sign the SLA

[jimjamdev]

Where do I add this env variable so I can remove this base64 inline completely?

It breaks any images being imported from node_modules

[rogierslag]

You can set inlineLimit in your package.json file

[stale]

This pull request has been automatically marked as stale because it has not had any recent activity. It will be closed in 7 days if no further activity occurs.

[rogierslag]

@Timer as you commented in #3437, what is your view towards this change?

[Timer]

I think we need to start considering a 'CSP' mode that disables a couple things: no inline runtime script, no inline assets, etc. I'm not sure we want to keep adding these one-off options to toggle behavior.

[rogierslag]

I'd love to work on that.

Combined with #5354 we can start out with a no-inline version. Would you also want to include the CSP calculations in here?

[Timer]

I don't know if we can ever get to performing the CSP calculations for people, but we can try to get close.

Let's consolidate the runtime chunk feature & disabling asset inlining under a single flag and start the discussion there. Send a PR?

[zyzski]

would really like this feature, having to eject to prevent a massive bundle is a bummer

[stale]

This pull request has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[peterbe]

Here's an alternative solution: #6060

Same idea but instead of controlling it via a variable in package.json it's an environment variable instead.

Why env var instead of a variable in package.json? Not sure but considering that's how you control whether JS inlining should happen or not (INLINE_RUNTIME_CHUNK) I thought that was the norm.

[stale]

This pull request has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[stale]

This pull request has been automatically closed because it has not had any recent activity. If you have a question or comment, please open a new issue. Thank you for your contribution!