Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

For legacy-javascript advice, suggest excluding some polyfills for "modern" build #10945

Open
connorjclark opened this issue Jun 11, 2020 · 7 comments
Assignees
Labels

Comments

@connorjclark
Copy link
Collaborator

As of today, @babel/preset-env + esmodules: true + bugfixes: true will apply these polyfills and transforms:

Using targets:
{
  "android": "61",
  "chrome": "61",
  "edge": "16",
  "firefox": "60",
  "ios": "10.3",
  "opera": "48",
  "safari": "10.1",
  "samsung": "8.2"
}

Using modules transform: auto

Using plugins:
  proposal-nullish-coalescing-operator { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  proposal-optional-chaining { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  proposal-json-strings { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  proposal-optional-catch-binding { "android":"61", "chrome":"61", "edge":"16", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  proposal-async-generator-functions { "android":"61", "chrome":"61", "edge":"16", "ios":"10.3", "opera":"48", "safari":"10.1" }
  proposal-object-rest-spread { "edge":"16", "ios":"10.3", "safari":"10.1" }
  transform-dotall-regex { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1" }
  proposal-unicode-property-regex { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  transform-named-capturing-groups-regex { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  transform-unicode-regex { "ios":"10.3", "safari":"10.1" }
  bugfix/transform-async-arrows-in-class { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  bugfix/transform-edge-default-parameters { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  bugfix/transform-edge-function-name { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  bugfix/transform-safari-block-shadowing { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  bugfix/transform-safari-for-shadowing { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  bugfix/transform-tagged-template-caching { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  transform-modules-commonjs { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  proposal-dynamic-import { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }

Using polyfills with `entry` option:

[/Users/cjamcl/src/lighthouse/lighthouse-core/scripts/legacy-javascript/variants/655dfce5bd8bbca5337615b71d06458d12bc2665e1a2c9e4e760d4bfef5691f4/core-js-3-preset-env-esmodules/true-and-bugfixes/main.js] Replaced core-js entries with the following polyfills:
  es.symbol.description { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  es.symbol.async-iterator { "android":"61", "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 { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  es.array.flat-map { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  es.array.index-of { "ios":"10.3", "safari":"10.1" }
  es.array.iterator { "android":"61", "chrome":"61", "opera":"48", "samsung":"8.2" }
  es.array.last-index-of { "ios":"10.3", "safari":"10.1" }
  es.array.reverse { "ios":"10.3", "safari":"10.1" }
  es.array.slice { "ios":"10.3", "safari":"10.1" }
  es.array.sort { "android":"61", "chrome":"61", "ios":"10.3", "opera":"48", "safari":"10.1" }
  es.array.splice { "ios":"10.3", "safari":"10.1" }
  es.array.unscopables.flat { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  es.array.unscopables.flat-map { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  es.array-buffer.constructor { "ios":"10.3", "safari":"10.1" }
  es.array-buffer.slice { "ios":"10.3", "safari":"10.1" }
  es.math.hypot { "android":"61", "chrome":"61", "opera":"48", "samsung":"8.2" }
  es.number.parse-float { "ios":"10.3", "safari":"10.1" }
  es.number.to-fixed { "edge":"16" }
  es.object.assign { "edge":"16" }
  es.object.define-getter { "android":"61", "chrome":"61", "opera":"48" }
  es.object.define-setter { "android":"61", "chrome":"61", "opera":"48" }
  es.object.from-entries { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  es.object.lookup-getter { "android":"61", "chrome":"61", "opera":"48" }
  es.object.lookup-setter { "android":"61", "chrome":"61", "opera":"48" }
  es.promise { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  es.promise.finally { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  es.reflect.set { "edge":"16" }
  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 { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  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 { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  es.string.trim-start { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  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" }
  esnext.aggregate-error { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  esnext.array.last-index { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  esnext.array.last-item { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  esnext.composite-key { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  esnext.composite-symbol { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  esnext.global-this { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  esnext.map.delete-all { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  esnext.map.every { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  esnext.map.filter { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  esnext.map.find { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  esnext.map.find-key { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  esnext.map.from { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  esnext.map.group-by { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  esnext.map.includes { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  esnext.map.key-by { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  esnext.map.key-of { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  esnext.map.map-keys { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  esnext.map.map-values { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  esnext.map.merge { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  esnext.map.of { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  esnext.map.reduce { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  esnext.map.some { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  esnext.map.update { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  esnext.math.clamp { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  esnext.math.deg-per-rad { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  esnext.math.degrees { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  esnext.math.fscale { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  esnext.math.iaddh { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  esnext.math.imulh { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  esnext.math.isubh { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  esnext.math.rad-per-deg { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  esnext.math.radians { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  esnext.math.scale { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  esnext.math.seeded-prng { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  esnext.math.signbit { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  esnext.math.umulh { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  esnext.number.from-string { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  esnext.observable { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  esnext.promise.all-settled { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  esnext.promise.any { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  esnext.promise.try { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  esnext.reflect.define-metadata { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  esnext.reflect.delete-metadata { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  esnext.reflect.get-metadata { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  esnext.reflect.get-metadata-keys { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  esnext.reflect.get-own-metadata { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  esnext.reflect.get-own-metadata-keys { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  esnext.reflect.has-metadata { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  esnext.reflect.has-own-metadata { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  esnext.reflect.metadata { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  esnext.set.add-all { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  esnext.set.delete-all { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  esnext.set.difference { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  esnext.set.every { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  esnext.set.filter { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  esnext.set.find { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  esnext.set.from { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  esnext.set.intersection { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  esnext.set.is-disjoint-from { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  esnext.set.is-subset-of { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  esnext.set.is-superset-of { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  esnext.set.join { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  esnext.set.map { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  esnext.set.of { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  esnext.set.reduce { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  esnext.set.some { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  esnext.set.symmetric-difference { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  esnext.set.union { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  esnext.string.at { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  esnext.string.code-points { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  esnext.string.match-all { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  esnext.string.replace-all { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  esnext.symbol.dispose { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  esnext.symbol.observable { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  esnext.symbol.pattern-match { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  esnext.weak-map.delete-all { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  esnext.weak-map.from { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  esnext.weak-map.of { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  esnext.weak-set.add-all { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  esnext.weak-set.delete-all { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  esnext.weak-set.from { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  esnext.weak-set.of { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  web.dom-collections.iterator { "android":"61", "chrome":"61", "edge":"16", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  web.immediate { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  web.queue-microtask { "android":"61", "chrome":"61", "edge":"16", "firefox":"60", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  web.url { "android":"61", "chrome":"61", "edge":"16", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  web.url.to-json { "android":"61", "chrome":"61", "edge":"16", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }
  web.url-search-params { "android":"61", "chrome":"61", "edge":"16", "ios":"10.3", "opera":"48", "safari":"10.1", "samsung":"8.2" }

That means, if you follow our planned module/nomodule strategy, the modern bundle will still ship Promise and TypedArrays.

Polyfilling just the typed-arrays and Promise is about 85KB:

// bundle and minify this file -> ~85kB
require("../../../../node_modules/core-js/modules/es.promise");
require("../../../../node_modules/core-js/modules/es.typed-array.float32-array");
require("../../../../node_modules/core-js/modules/es.typed-array.float64-array");
require("../../../../node_modules/core-js/modules/es.typed-array.int16-array");
require("../../../../node_modules/core-js/modules/es.typed-array.int32-array");
require("../../../../node_modules/core-js/modules/es.typed-array.int8-array");
require("../../../../node_modules/core-js/modules/es.typed-array.uint16-array");
require("../../../../node_modules/core-js/modules/es.typed-array.uint32-array");
require("../../../../node_modules/core-js/modules/es.typed-array.uint8-array");
require("../../../../node_modules/core-js/modules/es.typed-array.uint8-clamped-array");

AFAICT, typed-arrays are included either because 1) a bug in .toString in all versions of safari or 2) it is mistakenly not given a constraint for safari here

See the bottom of #10937 (comment) for why Promises are included.

Actions we can take:

  1. Do nothing, be ok with large polyfills in "modern" bundles
  2. Suggest excluding (via babel/preset-env exclude) type-arrays in the modern bundle, possibly also add a small polyfill to fix the toString issue (taking similar approach as babel/preset-modules and attempt to upstream to preset-env). Would be good to understand failure modes for this bug in older browsers.
  3. Suggest excluding Promise in the modern bundle. Again, maybe we can create a smaller polyfill to fix the thenable w/ error bug. (EDIT: actually this module would still get included, because other features like promise.finnaly, allSettled, etc pull in the promise module too ...)

Related: GoogleChrome/web.dev#3129 cc @housseindjirdeh
Context: #10937 (comment)

@patrickhulce
Copy link
Collaborator

possibly also add a small polyfill to fix the toString issue (taking similar approach as babel/preset-modules and attempt to upstream to preset-env)

I think this is an awesome idea. Even if it's 10x the time/effort on our part, getting the default module/nomodule build path to not pull in a polyfill for all typedarray behavior will have 100x the impact. 👍

@connorjclark
Copy link
Collaborator Author

connorjclark commented Jun 11, 2020

Seems it's more than just an issue with toString that was alluded to here.

See this. bah.

At the very least, I expect usage of typed arrays is low, but still ...

@connorjclark
Copy link
Collaborator Author

connorjclark commented Jun 11, 2020

Maybe going all-in on the module/nomodule pattern as it is today for our recommendation was too much of a half measure. perhaps we could expand upon the pattern:

  • for legacy browsers (nomodule), serve the output of esmodules: false or w/e.
  • for modern browsers (module), apply the necessary transforms based on esmodules: true but for polyfills use a much more recent set of browser targets, feature detect at runtime, and asynchronously load what's needed.
  • or, scratch all that, and come up with a nice way to generate multiple bundles of varying browser targets and the necessary detection on the server for picking which to serve to a useragent. We have been avoiding this due to the complexity of involving the server, but perhaps it's unavoidable.

Just spit-balling. I think we can continue w/ legacy-javascript audit as-is, use it as an introduction to differential loading, and improve upon it later.

cc @philipwalton

@patrickhulce
Copy link
Collaborator

See this. bah.

That is definitely a ridiculous Safari bug, but also extraordinarily narrow. On top of using typedarray specifically with arraybuffer initialization you need to pass undefined explicitly as the length and not just omit the argument.

but for polyfills use a much more recent set of browser targets, feature detect at runtime, and asynchronously load what's needed.

SGTM, I imagine we'll need to update web.dev docs with this approach e

come up with a nice way to generate multiple bundles of varying browser targets and the necessary detection on the server for picking which to serve to a useragent. We have been avoiding this due to the complexity of involving the server, but perhaps it's unavoidable.

I'm definitely less a fan of this approach.

I think we can continue w/ legacy-javascript audit as-is, use it as an introduction to differential loading, and improve upon it later.

Agreed. Does this mean that you're suggesting still flagging TypedArray polyfills and saying "figure out how to not load this your own way" or that you want to hide them for now until we have a plan to surface them later?

@connorjclark
Copy link
Collaborator Author

SGTM, I imagine we'll need to update web.dev docs with this approach e

The issue is that "feature detect at runtime, and asynchronously load what's needed" is not supported by core-js. And the detection is complex; it goes beyond just "is X defined", as you can see in the typed array case. Same for Promise.

you write:

await import('core-js/async') // doesn't exist
app.init()

babel'd to something like:

const corejs = await import('core-js/async') // doesn't exist
const missingModules = corejs.checkFor([...list of features...]) // doesn't exist
await Promise.all(missingModules.map(import)) // core-js polyfills share many internal modules so this is still lacking ...
app.init()

but as I said feature detection in core-js is coupled with the actual polyfilling so this isn't possible today.

I haven't looked at alternative polyfill libraries much yet. I did look at polyfill.io. Turns out they also ship TypedArrays (if requested) to all browsers ... but that seems like a bug. anyway, polyfill.io still requires modern browsers to do a request so I don't want to go that route.


Agreed. Does this mean that you're suggesting still flagging TypedArray polyfills and saying "figure out how to not load this your own way" or that you want to hide them for now until we have a plan to surface them later?

I'd prefer our first pass only require the user (in order to pass the audit...) to turn on babel preset-env's esmoudles, bugfixes and employ the module/nomodule pattern.

It's not clear to me how a site using typed arrays and needing to support Safari can avoid that polyfill. would certainly want to test some sites using TypedArrays on those browsers first to confirm if that bug is as rare as it seems

@patrickhulce
Copy link
Collaborator

The automagic version of this doesn't exist for sure, but you can manually do this sort of thing. Documenting how to go about doing it yourself or that 80KiB is simply because of two annoying safari bugs you probably won't run into seems worthwhile.

I'd prefer our first pass only require the user (in order to pass the audit...) to turn on babel preset-env's esmoudles, bugfixes and employ the module/nomodule pattern.

I agree, just making sure we're on the same page 👍

would certainly want to test some sites using TypedArrays on those browsers first to confirm if that bug is as rare as it seems

I'm definitely interested in finding other solutions here. Static analysis would be enough of a first pass, IMO. If anything invokes a TypedArray constructor with 3 arguments then they're potentially exposed. Typescript would know for sure :)

@paulirish
Copy link
Member

For LH pov, we start with heavily recommending @babel/preset-env + esmodules: true + bugfixes: true.

Ideally we can resolve the promises/typedarrays polyfilling from within the babel-preset-env bugfixes path. An alternative is recommending some exclude patterns, but it's not guaranteed to be totally fine.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

4 participants