From fdf12660c11853b707f14e43abb825cdc0576e35 Mon Sep 17 00:00:00 2001 From: xiaoxian521 <1923740402@qq.com> Date: Thu, 27 Oct 2022 02:19:23 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=89=93=E5=8C=85=E6=9E=84=E5=BB=BA?= =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=8F=AF=E9=80=89=20`gzip`=20=E4=B8=8E=20`br?= =?UTF-8?q?otli`=20=E5=8E=8B=E7=BC=A9=E6=A8=A1=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env.production | 7 +++- .env.staging | 7 +++- build/compress.ts | 63 +++++++++++++++++++++++++++++++++++ build/index.ts | 3 +- build/plugins.ts | 5 ++- package.json | 1 + pnpm-lock.yaml | 18 ++++++++++ src/views/permission/button/index.vue | 19 ++++------- src/views/permission/page/index.vue | 15 +++------ types/global.d.ts | 10 ++++++ vite.config.ts | 3 +- 11 files changed, 124 insertions(+), 27 deletions(-) create mode 100644 build/compress.ts diff --git a/.env.production b/.env.production index fdaa412..fc87876 100644 --- a/.env.production +++ b/.env.production @@ -11,4 +11,9 @@ VITE_PROXY_DOMAIN_REAL = "" VITE_LEGACY = false # 是否在打包时使用cdn替换本地库 替换 true 不替换 false -VITE_CDN = false \ No newline at end of file +VITE_CDN = false + +# 是否启用gzip压缩或brotli压缩（分两种情况，删除原始文件和不删除原始文件） +# 压缩时不删除原始文件的配置：gzip、brotli、both（同时开启 gzip 与 brotli 压缩）、none（不开启压缩，默认） +# 压缩时删除原始文件的配置：gzip-clear、brotli-clear、both-clear（同时开启 gzip 与 brotli 压缩）、none（不开启压缩，默认） +VITE_COMPRESSION = "none" \ No newline at end of file diff --git a/.env.staging b/.env.staging index 73836d2..f89ad71 100644 --- a/.env.staging +++ b/.env.staging @@ -14,4 +14,9 @@ VITE_PROXY_DOMAIN_REAL = "" VITE_LEGACY = false # 是否在打包时使用cdn替换本地库 替换 true 不替换 false -VITE_CDN = false \ No newline at end of file +VITE_CDN = false + +# 是否启用gzip压缩或brotli压缩（分两种情况，删除原始文件和不删除原始文件） +# 压缩时不删除原始文件的配置：gzip、brotli、both（同时开启 gzip 与 brotli 压缩）、none（不开启压缩，默认） +# 压缩时删除原始文件的配置：gzip-clear、brotli-clear、both-clear（同时开启 gzip 与 brotli 压缩）、none（不开启压缩，默认） +VITE_COMPRESSION = "none" \ No newline at end of file diff --git a/build/compress.ts b/build/compress.ts new file mode 100644 index 0000000..6178986 --- /dev/null +++ b/build/compress.ts @@ -0,0 +1,63 @@ +import type { Plugin } from "vite"; +import { isArray } from "@pureadmin/utils"; +import compressPlugin from "vite-plugin-compression"; + +export const configCompressPlugin = ( + compress: ViteCompression +): Plugin | Plugin[] => { + if (compress === "none") return null; + + const gz = { + // 生成的压缩包后缀 + ext: ".gz", + // 体积大于threshold才会被压缩 + threshold: 0, + // 默认压缩.js|mjs|json|css|html后缀文件，设置成true，压缩全部文件 + filter: () => true, + // 压缩后是否删除原始文件 + deleteOriginFile: false + }; + const br = { + ext: ".br", + algorithm: "brotliCompress", + threshold: 0, + filter: () => true, + deleteOriginFile: false + }; + + const codeList = [ + { k: "gzip", v: gz }, + { k: "brotli", v: br }, + { k: "both", v: [gz, br] } + ]; + + const plugins: Plugin[] = []; + + codeList.forEach(item => { + if (compress.includes(item.k)) { + if (compress.includes("clear")) { + if (isArray(item.v)) { + item.v.forEach(vItem => { + plugins.push( + compressPlugin(Object.assign(vItem, { deleteOriginFile: true })) + ); + }); + } else { + plugins.push( + compressPlugin(Object.assign(item.v, { deleteOriginFile: true })) + ); + } + } else { + if (isArray(item.v)) { + item.v.forEach(vItem => { + plugins.push(compressPlugin(vItem)); + }); + } else { + plugins.push(compressPlugin(item.v)); + } + } + } + }); + + return plugins; +}; diff --git a/build/index.ts b/build/index.ts index 3bbb16a..ed7cdfb 100644 --- a/build/index.ts +++ b/build/index.ts @@ -8,7 +8,8 @@ const warpperEnv = (envConf: Recordable): ViteEnv => { VITE_PROXY_DOMAIN_REAL: "", VITE_ROUTER_HISTORY: "", VITE_LEGACY: false, - VITE_CDN: false + VITE_CDN: false, + VITE_COMPRESSION: "none" }; for (const envName of Object.keys(envConf)) { diff --git a/build/plugins.ts b/build/plugins.ts index 0ed3220..cb54983 100644 --- a/build/plugins.ts +++ b/build/plugins.ts @@ -6,6 +6,7 @@ import svgLoader from "vite-svg-loader"; import legacy from "@vitejs/plugin-legacy"; import vueJsx from "@vitejs/plugin-vue-jsx"; import { viteMockServe } from "vite-plugin-mock"; +import { configCompressPlugin } from "./compress"; import VueI18n from "@intlify/vite-plugin-vue-i18n"; // import ElementPlus from "unplugin-element-plus/vite"; import { visualizer } from "rollup-plugin-visualizer"; @@ -17,7 +18,8 @@ import DefineOptions from "unplugin-vue-define-options/vite"; export function getPluginsList( command: string, VITE_LEGACY: boolean, - VITE_CDN: boolean + VITE_CDN: boolean, + VITE_COMPRESSION: ViteCompression ) { const prodMock = true; const lifecycle = process.env.npm_lifecycle_event; @@ -32,6 +34,7 @@ export function getPluginsList( // jsx、tsx语法支持 vueJsx(), VITE_CDN ? cdn : null, + configCompressPlugin(VITE_COMPRESSION), DefineOptions(), // 线上环境删除console removeConsole({ external: ["src/assets/iconfont/iconfont.js"] }), diff --git a/package.json b/package.json index 33c3d68..54e5363 100644 --- a/package.json +++ b/package.json @@ -117,6 +117,7 @@ "unplugin-vue-define-options": "0.7.3", "vite": "^3.1.8", "vite-plugin-cdn-import": "^0.3.5", + "vite-plugin-compression": "^0.5.1", "vite-plugin-mock": "^2.9.6", "vite-plugin-remove-console": "^1.1.0", "vite-svg-loader": "^3.6.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 640e0c2..09bee8a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -82,6 +82,7 @@ specifiers: unplugin-vue-define-options: 0.7.3 vite: ^3.1.8 vite-plugin-cdn-import: ^0.3.5 + vite-plugin-compression: ^0.5.1 vite-plugin-mock: ^2.9.6 vite-plugin-remove-console: ^1.1.0 vite-svg-loader: ^3.6.0 @@ -184,6 +185,7 @@ devDependencies: unplugin-vue-define-options: 0.7.3_vite@3.1.8+vue@3.2.41 vite: 3.1.8_sass@1.55.0+terser@5.15.1 vite-plugin-cdn-import: 0.3.5 + vite-plugin-compression: 0.5.1_vite@3.1.8 vite-plugin-mock: 2.9.6_mockjs@1.1.0+vite@3.1.8 vite-plugin-remove-console: 1.1.0 vite-svg-loader: 3.6.0 @@ -7538,6 +7540,22 @@ packages: - rollup dev: true + /vite-plugin-compression/0.5.1_vite@3.1.8: + resolution: + { + integrity: sha512-5QJKBDc+gNYVqL/skgFAP81Yuzo9R+EAf19d+EtsMF/i8kFUpNi3J/H01QD3Oo8zBQn+NzoCIFkpPLynoOzaJg== + } + peerDependencies: + vite: ">=2.0.0" + dependencies: + chalk: 4.1.2 + debug: 4.3.4 + fs-extra: 10.1.0 + vite: 3.1.8_sass@1.55.0+terser@5.15.1 + transitivePeerDependencies: + - supports-color + dev: true + /vite-plugin-mock/2.9.6_mockjs@1.1.0+vite@3.1.8: resolution: { diff --git a/src/views/permission/button/index.vue b/src/views/permission/button/index.vue index c058672..62306b1 100644 --- a/src/views/permission/button/index.vue +++ b/src/views/permission/button/index.vue @@ -6,20 +6,21 @@ defineOptions({ name: "PermissionButton" }); -let width = computed((): CSSProperties => { +let elStyle = computed((): CSSProperties => { return { - width: "85vw" + width: "85vw", + justifyContent: "start" }; });