perf: cache polyfills on-demand (#1954)

* perf: cache polyfills on-demand

* fix: actually apply the name

src/service-worker.js

@@ -17,6 +17,10 @@ const ON_DEMAND_CACHE = [
   {
     regex: /traineddata\.gz/,
     cache: ASSETS
+  },
+  {
+    regex: /\$polyfill\$/,
+    cache: WEBPACK_ASSETS
   }
 ]
 
@@ -35,6 +39,7 @@ const webpackAssets = __shell__
   .filter(filename => !filename.endsWith('.map')) // don't bother with sourcemaps
   .filter(filename => !filename.includes('tesseract-core.wasm')) // cache on-demand
   .filter(filename => !filename.includes('LICENSE')) // don't bother with license files
+  .filter(filename => !filename.includes('$polyfill$')) // polyfills are cached dynamically
 
 // `routes` is an array of `{ pattern: RegExp }` objects that
 // match the pages in your src

webpack/client.config.js

@@ -14,9 +14,8 @@ const urlRegex = require('../src/routes/_utils/urlRegexSource.js')()
 const output = Object.assign(config.client.output(), {
   // enables HMR in workers
   globalObject: 'this',
-  // Zeit does not like filenames with "$" in them, so just keep things simple
-  filename: dev ? '[hash]/[id].js' : '[id].[contenthash].js',
-  chunkFilename: dev ? '[hash]/[id].js' : '[id].[contenthash].js'
+  filename: dev ? '[hash]/[id].js' : '[id].[contenthash].[name].js',
+  chunkFilename: dev ? '[hash]/[id].js' : '[id].[contenthash].[name].js'
 })
 
 const emojiPickerI18n = LOCALE !== DEFAULT_LOCALE &&
@@ -93,8 +92,7 @@ module.exports = {
       chunks: 'async',
       minSize: 5000,
       maxAsyncRequests: Infinity,
-      maxInitialRequests: Infinity,
-      name: false // these chunk names can be annoyingly long
+      maxInitialRequests: Infinity
     }
   },
   plugins: [