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
import'@ babel/polyfill' , all polyfill will be loaded in disregard of browserlist import'@ babel/polyfill' , which will output the required polyfill according to browserlist Filter.
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 Previous: How to distinguish the a tag generated by react router Link from the normal a tag
Next: How does this piece of php code execute logic? can you tell me if I don't understand it?