Lazy-load or conditional load

Hi, I’m trying to limit loading Ponyfill chunk (after splitting the code with Webpack) only if browser is IE11. Something like this:

if (!!window.MSInputMethodContext && !!document.documentMode) { // IE11 detect
  require(/* webpackChunkName: "css-vars-ponyfill" */ "css-vars-ponyfill");
  // or 
  () => import(/* webpackChunkName: "css-vars-ponyfill" */ "css-vars-ponyfill")
}

Problem is, I can’t figure out how to call the main function to initialize, since I’m not assigning it a name and it isn’t registered under window.cssVars()

This way loads the package even tho I won’t be using it in all browsers:

// this named import can't be put inside conditional statement, as needs to be in the 'root' of code
import cssVars from 'css-vars-ponyfill';
// Call using defaults
cssVars();

I’d appreciate your advice on how to limit my package download size to only when polyfill is needed.

[standerksen]

Actually I have already figured it out with the help of a colleague. I just needed to install Ponyfill using npm install and then include the plain .js file which is installed in Gulp under paths = { js: ['<path>'] }.

[jhildenbiddle]

@standerksen –

Happy to help. Can you create a new issue so we can track this separately?

Thanks!