This repository was archived by the owner on Mar 14, 2024. It is now read-only.
This repository was archived by the owner on Mar 14, 2024. It is now read-only.
Modern builds - esmodules is not really "modern" anymore #965
Description
The codelab: "Serve modern code to modern browsers for faster page loads" isn't up to date anymore. We should think about how we want to keep advocating this.
The last week I've been on a witch hunt on why async-await got transpiled to generators when using @babel/preset-env which wasn't being transpiled in the codelab. Compat tables get updated and new versions of core-js 2 or 3 can change the polyfill game. The downside is that the esmodules: true setting will not scale overtime. We already see it happening as targeted browsers are > 3 years old. With the latest version of core-js we also add the promise polyfill.
Browerlist for esmodules = true:
edge >= 16
firefox >= 60
chrome >= 61
safari >= 10.1
opera >= 48
ios safari >= 10.3
android chrome >= 71
android firefox >= 64
If we look at possible transforms for core-js@2 & esmodules adds:
Transforms
transform-template-literals { "ios":"10.3", "safari":"10.1" }
transform-function-name { "edge":"16" }
transform-dotall-regex { "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1" }
transform-unicode-regex { "ios":"10.3", "safari":"10.1" }
transform-parameters { "edge":"16" }
transform-async-to-generator { "ios":"10.3", "safari":"10.1" }
proposal-async-generator-functions { "chrome":"61", "edge":"16", "ios":"10.3", "opera":"48", "safari":"10.1" }
proposal-object-rest-spread { "edge":"16", "ios":"10.3", "safari":"10.1" }
proposal-unicode-property-regex { "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1" }
proposal-json-strings { "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1" }
proposal-optional-catch-binding { "chrome":"61", "edge":"16", "ios":"10.3", "opera":"48", "safari":"10.1" }
transform-named-capturing-groups-regex { "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1" }
Polyfills
es7.array.flat-map { "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1" }
es6.array.sort { "chrome":"61", "ios":"10.3", "opera":"48", "safari":"10.1" }
es6.number.is-finite { "opera":"48" }
es6.number.is-nan { "opera":"48" }
es7.object.define-getter { "chrome":"61", "opera":"48" }
es7.object.define-setter { "chrome":"61", "opera":"48" }
es7.object.lookup-getter { "chrome":"61", "edge":"16", "opera":"48" }
es7.object.lookup-setter { "chrome":"61", "edge":"16", "opera":"48" }
es6.object.is { "opera":"48" }
es7.promise.finally { "chrome":"61", "edge":"16", "ios":"10.3", "opera":"48", "safari":"10.1" }
es6.regexp.constructor { "edge":"16" }
es6.regexp.flags { "edge":"16" }
es6.regexp.match { "edge":"16" }
es6.regexp.replace { "edge":"16" }
es6.regexp.split { "edge":"16" }
es6.regexp.search { "edge":"16" }
es6.regexp.to-string { "edge":"16" }
es6.symbol { "edge":"16" }
es7.symbol.async-iterator { "chrome":"61", "edge":"16", "ios":"10.3", "opera":"48", "safari":"10.1" }
es6.string.anchor { "opera":"48" }
es6.string.big { "opera":"48" }
es6.string.blink { "opera":"48" }
es6.string.bold { "opera":"48" }
es6.string.fixed { "opera":"48" }
es6.string.fontcolor { "opera":"48" }
es6.string.fontsize { "opera":"48" }
es6.string.italics { "opera":"48" }
es6.string.link { "opera":"48" }
es6.string.small { "opera":"48" }
es6.string.strike { "opera":"48" }
es6.string.sub { "opera":"48" }
es6.string.sup { "opera":"48" }
es7.string.trim-left { "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1" }
es7.string.trim-right { "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1" }
web.timers { "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1" }
web.immediate { "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1" }
web.dom.iterable { "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1" }
If we look at possible transforms for core-js@3 & esmodules adds.
Transforms
transform-template-literals { "ios":"10.3", "safari":"10.1" }
transform-function-name { "edge":"16" }
transform-dotall-regex { "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1" }
transform-unicode-regex { "ios":"10.3", "safari":"10.1" }
transform-parameters { "edge":"16" }
transform-async-to-generator { "ios":"10.3", "safari":"10.1" }
proposal-async-generator-functions { "chrome":"61", "edge":"16", "ios":"10.3", "opera":"48", "safari":"10.1" }
proposal-object-rest-spread { "edge":"16", "ios":"10.3", "safari":"10.1" }
proposal-unicode-property-regex { "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1" }
proposal-json-strings { "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1" }
proposal-optional-catch-binding { "chrome":"61", "edge":"16", "ios":"10.3", "opera":"48", "safari":"10.1" }
transform-named-capturing-groups-regex { "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1" }
Polyfills
es.symbol.description { "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1" }
es.symbol.async-iterator { "chrome":"61", "edge":"16", "ios":"10.3", "opera":"48", "safari":"10.1" }
es.symbol.match { "edge":"16" }
es.symbol.replace { "edge":"16" }
es.symbol.search { "edge":"16" }
es.symbol.split { "edge":"16" }
es.array.flat { "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1" }
es.array.flat-map { "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1" }
es.array.iterator { "chrome":"61", "opera":"48" }
es.array.reverse { "ios":"10.3", "safari":"10.1" }
es.array.sort { "chrome":"61", "ios":"10.3", "opera":"48", "safari":"10.1" }
es.array.unscopables.flat { "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1" }
es.array.unscopables.flat-map { "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1" }
es.array-buffer.constructor { "ios":"10.3", "safari":"10.1" }
es.array-buffer.slice { "ios":"10.3", "safari":"10.1" }
es.number.parse-float { "ios":"10.3", "safari":"10.1" }
es.number.to-fixed { "edge":"16" }
es.object.define-getter { "chrome":"61", "opera":"48" }
es.object.define-setter { "chrome":"61", "opera":"48" }
es.object.from-entries { "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1" }
es.object.lookup-getter { "chrome":"61", "opera":"48" }
es.object.lookup-setter { "chrome":"61", "opera":"48" }
es.promise { "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1" }
es.promise.finally { "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1" }
es.regexp.constructor { "edge":"16" }
es.regexp.flags { "edge":"16" }
es.regexp.to-string { "edge":"16" }
es.string.ends-with { "edge":"16" }
es.string.includes { "edge":"16" }
es.string.match { "edge":"16" }
es.string.pad-end { "ios":"10.3", "safari":"10.1" }
es.string.pad-start { "ios":"10.3", "safari":"10.1" }
es.string.replace { "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1" }
es.string.search { "edge":"16" }
es.string.split { "edge":"16" }
es.string.starts-with { "edge":"16" }
es.string.trim { "ios":"10.3", "safari":"10.1" }
es.string.trim-end { "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1" }
es.string.trim-start { "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1" }
es.typed-array.float32-array { "ios":"10.3", "safari":"10.1" }
es.typed-array.float64-array { "ios":"10.3", "safari":"10.1" }
es.typed-array.int8-array { "ios":"10.3", "safari":"10.1" }
es.typed-array.int16-array { "ios":"10.3", "safari":"10.1" }
es.typed-array.int32-array { "ios":"10.3", "safari":"10.1" }
es.typed-array.uint8-array { "ios":"10.3", "safari":"10.1" }
es.typed-array.uint8-clamped-array { "ios":"10.3", "safari":"10.1" }
es.typed-array.uint16-array { "ios":"10.3", "safari":"10.1" }
es.typed-array.uint32-array { "ios":"10.3", "safari":"10.1" }
es.typed-array.from { "ios":"10.3", "safari":"10.1" }
es.typed-array.of { "ios":"10.3", "safari":"10.1" }
es.typed-array.to-locale-string { "edge":"16" }
web.dom-collections.iterator { "chrome":"61", "edge":"16", "ios":"10.3", "opera":"48", "safari":"10.1" }
web.immediate { "chrome":"61", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1" }
web.queue-microtask { "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1" }
web.url { "chrome":"61", "edge":"16", "ios":"10.3", "opera":"48", "safari":"10.1" }
web.url.to-json { "chrome":"61", "edge":"16", "ios":"10.3", "opera":"48", "safari":"10.1" }
web.url-search-params { "chrome":"61", "edge":"16", "ios":"10.3", "opera":"48", "safari":"10.1" }
So basically core-js@3 does a better job to fix a lot of browsers bugs by using lots of polyfills to make browsers consistent but at a high cost of our bundle.
We need to find a better way to enable these polyfills, probably with dynamic imports or better static analysis.
I'm sorry that this issue isn't actionable. It's more to enable discussions on how to improve.
Some extra info: