perf: lazy-lazy-load the :focus-visible polyfill (#1785)

src/client.js

@@ -1,14 +1,20 @@
 import './routes/_thirdparty/regenerator-runtime/runtime.js'
 import * as sapper from '../__sapper__/client.js'
-import { loadPolyfills } from './routes/_utils/loadPolyfills'
 import './routes/_utils/serviceWorkerClient'
 import './routes/_utils/historyEvents'
 import './routes/_utils/loadingMask'
 import './routes/_utils/forceOnline'
+import { mark, stop } from './routes/_utils/marks'
+import { loadPolyfills } from './routes/_utils/loadPolyfills'
+import { loadNonCriticalPolyfills } from './routes/_utils/loadNonCriticalPolyfills'
 
+mark('loadPolyfills')
 loadPolyfills().then(() => {
-  console.log('init()')
+  stop('loadPolyfills')
+  mark('sapperStart')
   sapper.start({ target: document.querySelector('#sapper') })
+  stop('sapperStart')
+  /* no await */ loadNonCriticalPolyfills()
 })
 
 console.log('process.env.NODE_ENV', process.env.NODE_ENV)

src/routes/_utils/loadNonCriticalPolyfills.js

@@ -0,0 +1,8 @@
+import { supportsSelector } from './supportsSelector'
+import { importFocusVisible } from './asyncPolyfills'
+
+export function loadNonCriticalPolyfills () {
+  return Promise.all([
+    !supportsSelector(':focus-visible') && importFocusVisible()
+  ])
+}

src/routes/_utils/loadPolyfills.js

@@ -1,12 +1,10 @@
 import {
   importCustomElementsPolyfill,
-  importFocusVisible,
   importIndexedDBGetAllShim,
   importIntersectionObserver,
   importIntl,
   importRequestIdleCallback
 } from './asyncPolyfills'
-import { supportsSelector } from './supportsSelector'
 
 export function loadPolyfills () {
   return Promise.all([
@@ -14,7 +12,6 @@ export function loadPolyfills () {
     typeof requestIdleCallback === 'undefined' && importRequestIdleCallback(),
     !IDBObjectStore.prototype.getAll && importIndexedDBGetAllShim(),
     typeof customElements === 'undefined' && importCustomElementsPolyfill(),
-    process.env.LEGACY && typeof Intl === 'undefined' && importIntl(),
+    process.env.LEGACY && typeof Intl === 'undefined' && importIntl()
-    !supportsSelector(':focus-visible') && importFocusVisible()
   ])
 }