react best practices for module/nomodule feature detection

[jeremygottfried]

If you run google lighthouse performance test, one of the recommendations is to serve two builds, one for legacy browsers and one for browsers that support modules, as described in this article.

Here's what they tell you inline in the lighthouse opportunities section:

Polyfills and transforms enable legacy browsers to use new JavaScript features. However, many aren't necessary for modern browsers. For your bundled JavaScript, adopt a modern script deployment strategy using module/nomodule feature detection to reduce the amount of code shipped to modern browsers, while retaining support for legacy browsers. Learn MoreTBT

The html file would look something like this:

<!-- Browsers with ES module support load this file. -->
<script type="module" src="main.mjs"></script>

<!-- Older browsers load this file (and module-supporting -->
<!-- browsers know *not* to load this file). -->
<script nomodule src="main.es5.js"></script>

This apparently improves the "Total Blocking Time" metric. I've also seen it called "differential serving".

Does create-react-app have a built-in config for differential serving or a recommended best practice for configuring webpack?