In order to prevent unnecessary loading of polyfills, it is recommended to add some logic in the <head> section (https://webpack.js.org/guides/shimming/)
<script>
var modernBrowser = (
'fetch' in window &&
'assign' in Object
);
if ( !modernBrowser ) {
var scriptElement = document.createElement('script');
scriptElement.async = false;
scriptElement.src = './polyfills.bundle.js';
document.head.appendChild(scriptElement);
}
</script>
However, due to file chunking, consistency may not be maintained e.g.
polyfills.b0d50a4c4d9ca24a9f43.jsWhat would be the most effective way to incorporate this logic (in webpack or directly in the index.html)?
Note
Considering that I work with Vue, could importing it in the App component be a viable option?
For example:
var modernBrowser = (
'fetch' in window &&
'assign' in Object
);
if ( !modernBrowser ) {
require("polyfill")
}