feat: adding random suffix to static resources at build time (#618)

#### What type of PR is this?

/kind feature
/milstone 2.0

#### What this PR does / why we need it:

在构建时，为静态资源添加随机字符串后缀。防止升级版本之后缓存不会及时更新。

#### Which issue(s) this PR fixes:

#### Special notes for your reviewer:

/cc @halo-dev/sig-halo-admin 

#### Does this PR introduce a user-facing change?

```release-note
None
```

package.json

@@ -75,6 +75,7 @@
     "@types/lodash.merge": "^4.6.7",
     "@types/node": "^17.0.45",
     "@types/qs": "^6.9.7",
+    "@types/randomstring": "^1.1.8",
     "@types/uuid": "^8.3.4",
     "@vitejs/plugin-vue": "^3.1.0",
     "@vitejs/plugin-vue-jsx": "^2.0.1",
@@ -95,6 +96,7 @@
     "postcss": "^8.4.16",
     "prettier": "^2.7.1",
     "prettier-plugin-tailwindcss": "^0.1.13",
+    "randomstring": "^1.2.2",
     "sass": "^1.54.9",
     "start-server-and-test": "^1.14.0",
     "tailwindcss": "^3.1.8",

pnpm-lock.yaml

@@ -28,6 +28,7 @@ importers:
       '@types/lodash.merge': ^4.6.7
       '@types/node': ^17.0.45
       '@types/qs': ^6.9.7
+      '@types/randomstring': ^1.1.8
       '@types/uuid': ^8.3.4
       '@vitejs/plugin-vue': ^3.1.0
       '@vitejs/plugin-vue-jsx': ^2.0.1
@@ -64,6 +65,7 @@ importers:
       prettier-plugin-tailwindcss: ^0.1.13
       pretty-bytes: ^6.0.0
       qs: ^6.11.0
+      randomstring: ^1.2.2
       sass: ^1.54.9
       start-server-and-test: ^1.14.0
       tailwindcss: ^3.1.8
@@ -138,6 +140,7 @@ importers:
       '@types/lodash.merge': 4.6.7
       '@types/node': 17.0.45
       '@types/qs': 6.9.7
+      '@types/randomstring': 1.1.8
       '@types/uuid': 8.3.4
       '@vitejs/plugin-vue': 3.1.0_vite@3.1.3+vue@3.2.39
       '@vitejs/plugin-vue-jsx': 2.0.1_vite@3.1.3+vue@3.2.39
@@ -158,6 +161,7 @@ importers:
       postcss: 8.4.16
       prettier: 2.7.1
       prettier-plugin-tailwindcss: 0.1.13_prettier@2.7.1
+      randomstring: 1.2.2
       sass: 1.54.9
       start-server-and-test: 1.14.0
       tailwindcss: 3.1.8_postcss@8.4.16
@@ -3036,6 +3040,10 @@ packages:
     resolution: {integrity: sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==}
     dev: true
 
+  /@types/randomstring/1.1.8:
+    resolution: {integrity: sha512-NPOJcW+TTjT9Qiog0UjSoG3Sj24c7EfzZO39BU9E61D7fQtwNmBNblyQhSsK9+5s9Fm0o31rvX+ZyZkpE/c7jA==}
+    dev: true
+
   /@types/resolve/1.17.1:
     resolution: {integrity: sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==}
     dependencies:
@@ -3657,6 +3665,11 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /array-uniq/1.0.2:
+    resolution: {integrity: sha512-GVYjmpL05al4dNlKJm53mKE4w9OOLiuVHWorsIA3YVz+Hu0hcn6PtE3Ydl0EqU7v+7ABC4mjjWsnLUxbpno+CA==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
   /array.prototype.flat/1.3.0:
     resolution: {integrity: sha512-12IUEkHsAhA4DY5s0FPgNXIdc8VRSqD9Zp78a5au9abH/SOBrsp082JOWFNTjkMozh8mqcdiKuaLGhPeYztxSw==}
     engines: {node: '>= 0.4'}
@@ -7394,12 +7407,24 @@ packages:
     resolution: {integrity: sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==}
     engines: {node: '>=10'}
 
+  /randombytes/2.0.3:
+    resolution: {integrity: sha512-lDVjxQQFoCG1jcrP06LNo2lbWp4QTShEXnhActFBwYuHprllQV6VUpwreApsYqCgD+N1mHoqJ/BI/4eV4R2GYg==}
+    dev: true
+
   /randombytes/2.1.0:
     resolution: {integrity: sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==}
     dependencies:
       safe-buffer: 5.2.1
     dev: true
 
+  /randomstring/1.2.2:
+    resolution: {integrity: sha512-9FByiB8guWZLbE+akdQiWE3I1I6w7Vn5El4o4y7o5bWQ6DWPcEOp+aLG7Jezc8BVRKKpgJd2ppRX0jnKu1YCfg==}
+    hasBin: true
+    dependencies:
+      array-uniq: 1.0.2
+      randombytes: 2.0.3
+    dev: true
+
   /read-cache/1.0.0:
     resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
     dependencies:

vite.config.ts

@@ -9,11 +9,17 @@ import { viteExternalsPlugin as ViteExternals } from "vite-plugin-externals";
 import { viteStaticCopy as ViteStaticCopy } from "vite-plugin-static-copy";
 import { createHtmlPlugin as VitePluginHtml } from "vite-plugin-html";
 import Icons from "unplugin-icons/vite";
+import randomstring from "randomstring";
 
 export default ({ mode }: { mode: string }) => {
   const env = loadEnv(mode, process.cwd(), "");
   const isProduction = mode === "production";
 
+  const staticSuffix = randomstring.generate({
+    length: 8,
+    charset: "hex",
+  });
+
   return defineConfig({
     base: env.VITE_BASE_URL,
     plugins: [
@@ -35,22 +41,24 @@ export default ({ mode }: { mode: string }) => {
               isProduction ? ".prod" : ""
             }.js`,
             dest: "assets/vue",
-            rename: "vue.global.js",
+            rename: `vue.global.${staticSuffix}.js`,
           },
           {
             src: `./node_modules/vue-router/dist/vue-router.global${
               isProduction ? ".prod" : ""
             }.js`,
             dest: "assets/vue-router",
-            rename: "vue-router.global.js",
+            rename: `vue-router.global.${staticSuffix}.js`,
           },
           {
             src: "./node_modules/@halo-dev/admin-shared/dist/halo-admin-shared.iife.js",
             dest: "assets/admin-shared",
+            rename: `halo-admin-shared.iife.${staticSuffix}.js`,
           },
           {
             src: "./node_modules/@halo-dev/components/dist/halo-components.iife.js",
             dest: "assets/components",
+            rename: `halo-components.iife.${staticSuffix}.js`,
           },
         ],
       }),
@@ -59,10 +67,10 @@ export default ({ mode }: { mode: string }) => {
         inject: {
           data: {
             injectScript: [
-              `<script src="${env.VITE_BASE_URL}assets/vue/vue.global.js"></script>`,
+              `<script src="${env.VITE_BASE_URL}assets/vue/vue.global.${staticSuffix}.js"></script>`,
-              `<script src="${env.VITE_BASE_URL}assets/vue-router/vue-router.global.js"></script>`,
+              `<script src="${env.VITE_BASE_URL}assets/vue-router/vue-router.global.${staticSuffix}.js"></script>`,
-              `<script src="${env.VITE_BASE_URL}assets/components/halo-components.iife.js"></script>`,
+              `<script src="${env.VITE_BASE_URL}assets/components/halo-components.iife.${staticSuffix}.js"></script>`,
-              `<script src="${env.VITE_BASE_URL}assets/admin-shared/halo-admin-shared.iife.js"></script>`,
+              `<script src="${env.VITE_BASE_URL}assets/admin-shared/halo-admin-shared.iife.${staticSuffix}.js"></script>`,
             ].join("\n"),
           },
         },