You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
tailchat/client/web/build/workbox.ts

87 lines
2.8 KiB
TypeScript

import {
buildRuntimePluginJSResourceCacheGroup,
workboxPluginDetailPattern,
workboxPluginEntryPattern,
} from './utils';
import WorkboxPlugin from 'workbox-webpack-plugin';
/**
* 构建webpack workbox sw插件
*/
export function buildWorkboxPlugin(isDev: boolean) {
const workboxPlugin = new WorkboxPlugin.GenerateSW({
// https://developers.google.com/web/tools/workbox
// these options encourage the ServiceWorkers to get in there fast
// and not allow any straggling "old" SWs to hang around
clientsClaim: true,
skipWaiting: true,
exclude: isDev
? // https://github.com/GoogleChrome/workbox/issues/1790#issuecomment-1241356293
// In dev, exclude everything.
// This avoids irrelevant warnings about chunks being too large for caching.
// In non-dev, use the default `exclude` option, don't override.
[/./]
: // Do not precache images in production
[/\.(?:png|jpg|jpeg|svg)$/],
maximumFileSizeToCacheInBytes: 8 * 1024 * 1024, // 限制最大缓存 8M
// Define runtime caching rules.
runtimeCaching: [
{
// Match any request that ends with .png, .jpg, .jpeg or .svg.
urlPattern: /\.(?:png|jpg|jpeg|svg)$/,
// Apply a cache-first strategy.
// Reference: https://developers.google.com/web/tools/workbox/reference-docs/latest/module-workbox-strategies
handler: 'CacheFirst',
options: {
// Use a custom cache name.
cacheName: 'images',
// Only cache 10 images.
expiration: {
maxEntries: 10,
maxAgeSeconds: 14 * 24 * 60 * 60, // 2 week
},
},
},
//#region 插件缓存匹配
// 匹配内置 plugins 入口文件 以加速
buildRuntimePluginJSResourceCacheGroup(
workboxPluginEntryPattern,
'builtin-plugins-entry',
24 * 60 * 60 // 1 day
),
// 匹配内置 plugins 内容 以加速
buildRuntimePluginJSResourceCacheGroup(
workboxPluginDetailPattern,
'builtin-plugins-detail',
7 * 24 * 60 * 60 // 1 week
),
//#endregion
],
});
if (isDev) {
// Suppress the "InjectManifest has been called multiple times" warning by reaching into
// the private properties of the plugin and making sure it never ends up in the state
// where it makes that warning.
// https://github.com/GoogleChrome/workbox/blob/v6/packages/workbox-webpack-plugin/src/inject-manifest.ts#L260-L282
Object.defineProperty(workboxPlugin, 'alreadyCalled', {
get() {
return false;
},
set() {
// do nothing; the internals try to set it to true, which then results in a warning
// on the next run of webpack.
},
});
}
return workboxPlugin;
}