How do I get babel-polyfill to load on demand?

babel-polyfill can make us happy to use es6 , es7 API , but often only part of these API are used in the project, and a babel-polyfill is compressed with a size of nearly 100k, which is really scary.

for example, I want Promise to be used in the project, and only part of the Promise code is loaded when packaged, not the whole polyfill .

how can I get babel-polyfill to load on demand?


is similar to the following
mode 1

const Promise = require('babel-runtime/core-js/promise')

Mode 2

import 'core-js/es6/promise'

the difference between the above two ways, the first is introduced in the module, and the second is global, you can choose a reasonable way according to your needs.

you can actually pull in only the polyfills you are currently using or want to use using core-js. So instead of pulling in babel-polyfill into our app
ide-bundle-with-webpack-and-source-map-explorer-41096559beca" rel=" nofollow noreferrer "> reference links


use "transform-runtime"

npm install --save-dev transform-runtime

.babelrc

{
    "plugins": [
        "transform-runtime"
    ]
}

preact template is to package polyfills separately and add
< script > window.fetch | | document.write ('< script src= "<% = htmlWebpackPlugin.files.chunks [" polyfills "]. Entry% >" > <\ / script >') < / script >
then exclude this file from the webpack configuration and automatically insert it into the html template.
is something like that. I don't know what else to do


.

what you should mean is to load polyfill according to the user's browser, rather than solve this problem during the packaging phase.
if you know what your project may need polyfill , it may be more appropriate to refer to a third-party polyfill service .

for example, if only map and Promise are used, the polyfill service will need to load
https://cdn.polyfill.io/v2/polyfill.js?features=Array.prototype.map,Promise

.

babel 7 ides a relatively perfect solution:

  • useBuiltIns defaults to false
    according to whether browserlist converts the new syntax with polyfill new API

    1. false: do not enable polyfill, if import'@ babel/polyfill' , all polyfill will be loaded in disregard of browserlist
    2. entry: enabled. You need to manually import'@ babel/polyfill' , which will output the required polyfill according to browserlist Filter.
    3. usage: there is no need to manually import'@ babel/polyfill' (add it, it will be removed during construction), and polyfill will be performed on demand according to the new API used by the browserlist + business code
Menu