chore: 调整缓存策略, 以优化用户体验

web/build/__tests__/utils.spec.ts

@@ -1,18 +1,38 @@
-import { workboxPluginPattern } from '../utils';
+import {
+  workboxPluginEntryPattern,
+  workboxPluginDetailPattern,
+} from '../utils';
 
-describe('workboxPluginPattern', () => {
+describe('workboxPluginEntryPattern', () => {
   test.each([
     // 缓存case
-    ['/plugins/com.msgbyte.foo/bar.js', true],
-    ['/plugins/com.msgbyte.foo.foz/bar.js', true],
+    ['/plugins/com.msgbyte.foo/index.js', true],
+    ['/plugins/com.msgbyte.foo/bar/index.js', true],
+
+    // 不缓存case
+    ['/plugins/com.msgbyte.foo/index-abcde.js', false],
+    ['/plugins/com.msgbyte.foo/index.woff', false],
+    ['/plugins/com.msgbyte.foo/font.woff', false],
+    ['/plugins/a/b/c/d/e/f/g.js', false],
+  ])('%s: %p', (input, output) => {
+    expect(workboxPluginEntryPattern.test(input)).toBe(output);
+  });
+});
+
+describe('workboxPluginDetailPattern', () => {
+  test.each([
+    // 缓存case
+    ['/plugins/com.msgbyte.foo/index-abcde.js', true],
+    ['/plugins/com.msgbyte.foo/bar-a0c1e.js', true],
+    ['/plugins/com.msgbyte.foo.foz/bar-a0c1e.js', true],
+    ['/plugins/com.msgbyte.foo/a/b/c/d/e/f/bar-a0c1e.js', true],
 
     // 不缓存case
     ['/plugins/com.msgbyte.foo/index.js', false],
-    ['/plugins/com.msgbyte.foo/index-abcde.js', false], // TODO: 这个期望是true的。但是不会写正则
     ['/plugins/com.msgbyte.foo/index.woff', false],
     ['/plugins/com.msgbyte.foo/font.woff', false],
     ['/plugins/a/b/c/d/e/f/g.js', false],
   ])('%s: %p', (input, output) => {
-    expect(workboxPluginPattern.test(input)).toBe(output);
+    expect(workboxPluginDetailPattern.test(input)).toBe(output);
   });
 });

web/build/utils.ts

@@ -1,5 +1,8 @@
 /**
  * workbox 匹配plugin的缓存
  */
-export const workboxPluginPattern =
-  /plugins\/com\.msgbyte(.*?)\/((?!index).)*?\.js/;
+export const workboxPluginEntryPattern =
+  /plugins\/com\.msgbyte(.*?)\/index\.js/;
+
+export const workboxPluginDetailPattern =
+  /plugins\/com\.msgbyte\.(.*?)\/(\S+?)\-(\S*?)\.js/;

web/build/webpack.config.ts

@@ -13,7 +13,7 @@ import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
 import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
 import fs from 'fs';
 import WorkboxPlugin from 'workbox-webpack-plugin';
-import { workboxPluginPattern } from './utils';
+import { workboxPluginDetailPattern, workboxPluginEntryPattern } from './utils';
 import dayjs from 'dayjs';
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
@@ -112,17 +112,19 @@ const plugins: Configuration['plugins'] = [
           // Only cache 10 images.
           expiration: {
             maxEntries: 10,
+            maxAgeSeconds: 14 * 24 * 60 * 60, // 2 week
           },
         },
       },
+      //#region 插件缓存匹配
       {
-        // 匹配内置 plugins 以加速
-        urlPattern: workboxPluginPattern,
+        // 匹配内置 plugins 入口文件 以加速
+        urlPattern: workboxPluginEntryPattern,
         handler: 'StaleWhileRevalidate',
         options: {
-          cacheName: 'builtin-plugins',
+          cacheName: 'builtin-plugins-entry',
           expiration: {
-            maxAgeSeconds: 1 * 60 * 60, // 1h
+            maxAgeSeconds: 24 * 60 * 60, // 1 day
           },
           cacheableResponse: {
             // 只缓存js, 防止404后台直接fallback到html
@@ -132,6 +134,24 @@ const plugins: Configuration['plugins'] = [
           },
         },
       },
+      {
+        // 匹配内置 plugins 内容 以加速
+        urlPattern: workboxPluginDetailPattern,
+        handler: 'StaleWhileRevalidate',
+        options: {
+          cacheName: 'builtin-plugins-detail',
+          expiration: {
+            maxAgeSeconds: 7 * 24 * 60 * 60, // 1 week
+          },
+          cacheableResponse: {
+            // 只缓存js, 防止404后台直接fallback到html
+            headers: {
+              'content-type': 'application/javascript; charset=utf-8',
+            },
+          },
+        },
+      },
+      //#endregion
     ],
   }),
 ];