perf: use webpack contenthash for better caching (#1573)
This commit is contained in:
parent
2001e93399
commit
afb06d988e
|
@ -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'
|
||||
|
|
|
@ -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 = {}
|
||||
|
|
|
@ -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-'
|
||||
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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)
|
||||
|
|
21
src/routes/_utils/lifecycle.js
Normal file
21
src/routes/_utils/lifecycle.js
Normal file
|
@ -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 }
|
|
@ -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.
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -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,
|
||||
|
|
Loading…
Reference in a new issue