From dcf6d39cdea7e7b635c6f9aa548cb9aab1a1b630 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Fri, 18 Feb 2022 16:55:49 +0800
Subject: [PATCH] =?UTF-8?q?chore:=20=E8=B0=83=E6=95=B4=E7=BC=93=E5=AD=98?=
 =?UTF-8?q?=E7=AD=96=E7=95=A5,=20=E4=BB=A5=E4=BC=98=E5=8C=96=E7=94=A8?=
 =?UTF-8?q?=E6=88=B7=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/build/__tests__/utils.spec.ts | 32 +++++++++++++++++++++++++------
 web/build/utils.ts                |  7 +++++--
 web/build/webpack.config.ts       | 30 ++++++++++++++++++++++++-----
 3 files changed, 56 insertions(+), 13 deletions(-)

diff --git a/web/build/__tests__/utils.spec.ts b/web/build/__tests__/utils.spec.ts
index f6c7636c..e4895d13 100644
--- a/web/build/__tests__/utils.spec.ts
+++ b/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);
   });
 });
diff --git a/web/build/utils.ts b/web/build/utils.ts
index 15c90526..080b4099 100644
--- a/web/build/utils.ts
+++ b/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/;
diff --git a/web/build/webpack.config.ts b/web/build/webpack.config.ts
index d767b8e6..539ecbaf 100644
--- a/web/build/webpack.config.ts
+++ b/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
     ],
   }),
 ];