From 9cf8f8b5167e33a2fc788d3e1a757fa5d370a8b1 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Mon, 15 Feb 2021 16:47:18 -0800
Subject: [PATCH] perf: cache polyfills on-demand (#1954)

* perf: cache polyfills on-demand

* fix: actually apply the name
---
 src/service-worker.js    | 5 +++++
 webpack/client.config.js | 8 +++-----
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/service-worker.js b/src/service-worker.js
index e992f184..f73813aa 100644
--- a/src/service-worker.js
+++ b/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
diff --git a/webpack/client.config.js b/webpack/client.config.js
index 238ef547..e66caed8 100644
--- a/webpack/client.config.js
+++ b/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: [