Skip to content
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

Closed
Closed
Modern builds - esmodules is not really "modern" anymore#965
Assignees
addyosmanihousseindjirdeh
Labels
contentIssues related to content
@wardpeet

Description

@wardpeet
wardpeet
opened on Jun 3, 2019

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:

cc @developit @addyosmani

Metadata

Metadata

Assignees

Labels

contentIssues related to content

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions