refactor/polyfills: browser detection, other fixes for performance gains

src/public/main.js

@@ -1,21 +1,10 @@
 'use strict'
 
-require('core-js/stable')
-require('regenerator-runtime/runtime')
 require('./polyfills')
 
-const textEncoding = require('text-encoding')
 const Sentry = require('@sentry/browser')
 const { Angular: AngularIntegration } = require('@sentry/integrations')
 
-if (!window['TextDecoder']) {
-  window['TextDecoder'] = textEncoding.TextDecoder
-}
-
-if (!window['TextEncoder']) {
-  window['TextEncoder'] = textEncoding.TextEncoder
-}
-
 // Define module dependencies (without ngSentry)
 const moduleDependencies = [
   'ui.select',

src/public/modules/forms/helpers/ndjsonStream.js

@@ -1,26 +1,17 @@
 /* eslint-disable camelcase */
 'use strict'
 
-// Polyfills
-const streams = require('web-streams-polyfill')
-const textEncoding = require('text-encoding')
+// Modified fork of https://github.com/canjs/can-ndjson-stream to enqueue
+// the string immediately without a JSON.parse() step, as the stream payload
+// is to be decrypted by the decryption worker.
 
-// Use polyfill if it does not exist
-if (!window['TextDecoder']) {
-  window['TextDecoder'] = textEncoding.TextDecoder
-}
-
-// Modified fork of https://github.com/canjs/can-ndjson-stream to use polyfilled
-// ReadableStream so it works in ie11.
-
-// Also modified to return the string immediately instead of parsing since the
-// string is to be passed into a decryption worker.
+// Note that this code assumes a polyfill of TextDecoder is available to run in IE11.
 
 const ndjsonStream = function (response) {
   // For cancellation
   var is_reader
   var cancellationRequest = false
-  return new streams.ReadableStream({
+  return new ReadableStream({
     start: function (controller) {
       var reader = response.getReader()
       is_reader = reader

src/public/polyfills.js

@@ -1,4 +1,36 @@
-require('web-streams-polyfill')
-require('text-encoding')
-require('whatwg-fetch')
-require('abortcontroller-polyfill/dist/polyfill-patch-fetch')
+/**
+ * Runtime polyfill injection with feature detection to make app work on older browsers.
+ */
+
+// core-js polyfills crucial, commonly used functions expected to be in the standard library
+// e.g. Promise, Object.values, Array.prototype.includes
+// The stable option includes ES and web standards. See link for more info:
+// https://github.com/zloirock/core-js/blob/master/docs/2019-03-19-core-js-3-babel-and-a-look-into-the-future.md
+require('core-js/stable')
+
+// Runtime library for async and generator functions. Babel transpilation expects this to be in
+// the target namespace, and it also relies on core-js, so this cannot be removed
+// until IE11 support is dropped.
+require('regenerator-runtime/runtime')
+
+// Web Streams API has varying levels of support amongst different browsers
+// See https://caniuse.com/streams
+if (!window.ReadableStream || !window.WritableStream) {
+  require('web-streams-polyfill')
+}
+
+// For IE11, Opera Mini
+// https://caniuse.com/?search=fetch
+if (!window.fetch) {
+  require('whatwg-fetch') // fetch API
+  require('abortcontroller-polyfill/dist/polyfill-patch-fetch')
+}
+
+// For IE11, Opera Mini
+// https://caniuse.com/?search=TextEncoder
+if (!window.TextDecoder || !window.TextEncoder) {
+  // TextEncoder and TextDecoder
+  const textEncoding = require('text-encoding')
+  window['TextDecoder'] = textEncoding.TextDecoder
+  window['TextEncoder'] = textEncoding.TextEncoder
+}

webpack.common.js

@@ -25,6 +25,7 @@ module.exports = [
         },
         {
           test: /\.worker\.js$/,
+          // Don't transpile polyfills
           exclude: /@babel(?:\/|\\{1,2})runtime|core-js/,
           use: [
             {

webpack.prod.js

@@ -35,7 +35,8 @@ module.exports = [
       rules: [
         {
           test: /\.js$/,
-          exclude: /@babel(?:\/|\\{1,2})runtime|core-js/,
+          // Don't transpile polyfills
+          exclude: /@babel(?:\/|\\{1,2})runtime|core-js|web-streams-polyfill|whatwg-fetch|abortcontroller-polyfill|text-encoding/,
           use: {
             loader: 'babel-loader',
           },