Intl.js polyfill/shim with webpack?

Question

I'm using React-Intl with webpack and I need the Intl shim to support Safari and IE, but I don't want to load it for browsers that already support the Intl spec.

The polyfill is pretty huge (900kb), how can I ensure it only gets loaded in browsers that don't support it already?

Answer 1

An simple (non-webpack) approach would be to do something like this in your HTML:

<script>
 if (!window.Intl) { document.write('<script src="/js/Intl.min.js"><\/script>'); }
</script>

Though document.write is not considered a best practice, this would provide a blocking approach to solving the problem, resulting in considerably less code in your the application. This solution does not use webpack, but may be a suitable solution for many people in this situation.