title: How to detect features and lazy-load only the needed polyfills with babel / core-js?
body: <p>Polyfill services like <a href="https://polyfill.io" rel="noreferrer">polyfill.io</a> seem to be delivering only small feature detects to the browser and then lazy-load only the polyfills that are actually needed.</p>
  
  <p>As I understand the <a href="https://babeljs.io/docs/en/usage#polyfill" rel="noreferrer">babel documentation on polyfilling</a>, babel always include the full set of potentially needed polyfills: it will process a <code>browserslist</code> and then include those polyfills from core-js that the weakest browsers need. A bundler like webpack would then probably merge all these polyfills into the application, but without runtime feature detects.</p>
  
  <p>My application uses modern ES language features but also targets a wide range of browsers, including IE10 and IE11. That requires a lot of polyfills and will probably bloat the bundle, especially for modern browsers that may not need the most of the polyfills.</p>
  
  <p>So I was wondering: can I tell either babel and/or webpack to only include feature detects, split the polyfills off into separate chunks (individually or into small bundles), and then, at runtime, only "lazy"-load what is actually needed?</p>