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
```
pull/615/head
Ryan Wang 2022-09-22 21:56:12 +08:00 committed by GitHub
parent 539fd8fd14
commit 76345ec231
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 41 additions and 6 deletions

View File

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

View File

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

View File

@ -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-router/vue-router.global.js"></script>`,
`<script src="${env.VITE_BASE_URL}assets/components/halo-components.iife.js"></script>`,
`<script src="${env.VITE_BASE_URL}assets/admin-shared/halo-admin-shared.iife.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.${staticSuffix}.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.${staticSuffix}.js"></script>`,
].join("\n"),
},
},