webpack - how to load a chunked polyfill file as necessary

The name of the pictureThe name of the pictureThe name of the pictureClash Royale CLAN TAG#URR8PPP


webpack - how to load a chunked polyfill file as necessary



So the recommended way to prevent loading polyfills if it's unnecessary is to put some logic in the <head> (original: https://webpack.js.org/guides/shimming/)


<head>


<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, as my files are chunked, it will not be consistent e.g. polyfills.b0d50a4c4d9ca24a9f43.js.


polyfills.b0d50a4c4d9ca24a9f43.js



So what's the best way to implement this logic (in webpack or just in the index.html)


index.html



Note



I work with Vue, so maybe I could just import it in the App component?


App



E.g.


var modernBrowser = (
'fetch' in window &&
'assign' in Object
);

if ( !modernBrowser ) {
require("polyfill")
}









By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Popular posts from this blog

Visual Studio Code: How to configure includePath for better IntelliSense results

Spring cloud config client Could not locate PropertySource

Makefile test if variable is not empty