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

This commit is contained in:
Nolan Lawson 2019-10-14 20:00:57 -07:00 committed by GitHub
parent 2001e93399
commit afb06d988e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 38 additions and 11 deletions

View file

@ -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'

View file

@ -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 = {}

View file

@ -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-'

View file

@ -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 {

View file

@ -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)

View 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 }

View file

@ -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.

View file

@ -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,

View file

@ -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',

View file

@ -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,