perf: use webpack contenthash for better caching (#1573)

src/routes/_api/stream/TimelineStream.js

@@ -1,5 +1,5 @@
 import { WebSocketClient } from '../../_thirdparty/websocket/websocket'
-import lifecycle from 'page-lifecycle/dist/lifecycle.mjs'
+import { lifecycle } from '../../_utils/lifecycle'
 import { getStreamUrl } from './getStreamUrl'
 import { EventEmitter } from 'events-light'
 import { eventBus } from '../../_utils/eventBus'

src/routes/_database/databaseLifecycle.js

@@ -2,7 +2,7 @@ import { DB_VERSION_CURRENT } from './constants'
 import { addKnownInstance, deleteKnownInstance } from './knownInstances'
 import { migrations } from './migrations'
 import { clearAllCaches } from './cache'
-import lifecycle from 'page-lifecycle/dist/lifecycle.mjs'
+import { lifecycle } from '../_utils/lifecycle'
 
 const openReqs = {}
 const databaseCache = {}

src/routes/_database/knownInstances.js

@@ -1,5 +1,5 @@
 import { set, keys, del, close } from '../_thirdparty/idb-keyval/idb-keyval'
-import lifecycle from 'page-lifecycle/dist/lifecycle.mjs'
+import { lifecycle } from '../_utils/lifecycle'
 
 const PREFIX = 'known-instance-'
 

src/routes/_store/LocalStorageStore.js

@@ -1,6 +1,6 @@
 import { Store } from 'svelte/store'
 import { safeLocalStorage as LS } from '../_utils/safeLocalStorage'
-import lifecycle from 'page-lifecycle/dist/lifecycle.mjs'
+import { lifecycle } from '../_utils/lifecycle'
 import { safeParse } from './safeParse'
 
 export class LocalStorageStore extends Store {

src/routes/_utils/asyncModules.js

@@ -55,3 +55,7 @@ export const importTesseractWorker = () => import(
 export const importVirtualListStore = () => import(
   /* webpackChunkName: 'virtualListStore.js' */ '../_components/virtualList/virtualListStore.js'
 )
+
+export const importPageLifecycle = () => import(
+  /* webpackChunkName: 'page-lifecycle' */ 'page-lifecycle/dist/lifecycle.mjs'
+).then(getDefault)

src/routes/_utils/lifecycle.js

@@ -0,0 +1,21 @@
+// the page-lifecycle package causes some problems (doesn't work in node),
+// and plus it's not needed immediately, so lazy-load it
+import { importPageLifecycle } from './asyncModules'
+
+function addEventListener (event, func) {
+  if (process.browser) {
+    importPageLifecycle().then(lifecycle => {
+      lifecycle.addEventListener(event, func)
+    })
+  }
+}
+
+function removeEventListener (event, func) {
+  if (process.browser) {
+    importPageLifecycle().then(lifecycle => {
+      lifecycle.removeEventListener(event, func)
+    })
+  }
+}
+
+export const lifecycle = { addEventListener, removeEventListener }

src/routes/_utils/scheduleInterval.js

@@ -1,4 +1,4 @@
-import lifecycle from 'page-lifecycle/dist/lifecycle.mjs'
+import { lifecycle } from './lifecycle'
 
 /**
  * Schedule a callback, similar to setInterval but disables itself when the page is not active to save battery/CPU.

webpack/client.config.js

@@ -13,8 +13,8 @@ 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: '[hash]/[id].js',
-  chunkFilename: '[hash]/[id].js'
+  filename: dev ? '[hash]/[id].js' : '[id].[contenthash].js',
+  chunkFilename: dev ? '[hash]/[id].js' : '[id].[contenthash].js'
 })
 
 module.exports = {
@@ -29,7 +29,7 @@ module.exports = {
         use: {
           loader: 'worker-loader',
           options: {
-            name: 'blurhash.[hash].[name].[ext]'
+            name: dev ? '[hash]/blurhash.[name].[ext]' : 'blurhash.[contenthash].[name].[ext]'
           }
         }
       },
@@ -43,7 +43,7 @@ module.exports = {
         use: {
           loader: 'file-loader',
           options: {
-            name: 'tesseract-asset.[hash].[name].[ext]'
+            name: dev ? '[hash]/tesseract-asset.[name].[ext]' : 'tesseract-asset.[contenthash].[name].[ext]'
           }
         }
       },
@@ -90,6 +90,9 @@ module.exports = {
     minimizer: [
       terser()
     ],
+    // TODO: we should be able to enable this, but Sapper breaks if we do so
+    // // isolate runtime chunk to avoid excessive cache invalidations https://webpack.js.org/guides/caching/
+    // runtimeChunk: 'single',
     splitChunks: {
       chunks: 'async',
       minSize: 5000,

webpack/server.config.js

@@ -6,7 +6,6 @@ const { mode, dev, resolve, inlineSvgs, allSvgs } = require('./shared.config')
 // modules that the server should ignore, either because they cause errors or warnings
 // (because they're only used on the client side)
 const NOOP_MODULES = [
-  'page-lifecycle/dist/lifecycle.mjs',
   '../_workers/blurhash',
   'tesseract.js/dist/worker.min.js',
   'tesseract.js/dist/worker.min.js.map',

webpack/terser.config.js

@@ -1,7 +1,7 @@
 const TerserWebpackPlugin = require('terser-webpack-plugin')
 
 module.exports = () => new TerserWebpackPlugin({
-  exclude: /tesseract-asset/,
+  exclude: /(tesseract-asset|page-lifecycle)/, // tesseract causes problems, page-lifecycle is pre-minified
   cache: !process.env.TERSER_DISABLE_CACHE,
   parallel: true,
   sourceMap: true,