test: 测试打包压缩

package-lock.json

@@ -73,6 +73,7 @@
 				"unplugin-auto-import": "^0.16.7",
 				"unplugin-vue-components": "^0.25.2",
 				"vite": "^4.0.0",
+				"vite-plugin-compression": "^0.5.1",
 				"vite-plugin-vue-setup-extend": "^0.4.0",
 				"vue-eslint-parser": "^9.1.0"
 			},
@@ -6598,6 +6599,20 @@
 				"node": "*"
 			}
 		},
+		"node_modules/fs-extra": {
+			"version": "10.1.0",
+			"resolved": "https://registry.npmmirror.com/fs-extra/-/fs-extra-10.1.0.tgz",
+			"integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
+			"dev": true,
+			"dependencies": {
+				"graceful-fs": "^4.2.0",
+				"jsonfile": "^6.0.1",
+				"universalify": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
 		"node_modules/fs.realpath": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmmirror.com/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -6739,6 +6754,12 @@
 				"get-intrinsic": "^1.1.3"
 			}
 		},
+		"node_modules/graceful-fs": {
+			"version": "4.2.11",
+			"resolved": "https://registry.npmmirror.com/graceful-fs/-/graceful-fs-4.2.11.tgz",
+			"integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+			"dev": true
+		},
 		"node_modules/graphemer": {
 			"version": "1.4.0",
 			"resolved": "https://registry.npmmirror.com/graphemer/-/graphemer-1.4.0.tgz",
@@ -7253,6 +7274,18 @@
 			"resolved": "https://registry.npmmirror.com/ace-builds/-/ace-builds-1.29.0.tgz",
 			"integrity": "sha512-TyTe22nW1rUi7bzbGwLwg/6EN88CJuxUO0193nv/6cQ8lMBV6XtfeQIAgU3dkr8wnCn2okycqHjCDlPGNcWqoQ=="
 		},
+		"node_modules/jsonfile": {
+			"version": "6.1.0",
+			"resolved": "https://registry.npmmirror.com/jsonfile/-/jsonfile-6.1.0.tgz",
+			"integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+			"dev": true,
+			"dependencies": {
+				"universalify": "^2.0.0"
+			},
+			"optionalDependencies": {
+				"graceful-fs": "^4.1.6"
+			}
+		},
 		"node_modules/jsonrepair": {
 			"version": "3.2.4",
 			"resolved": "https://registry.npmmirror.com/jsonrepair/-/jsonrepair-3.2.4.tgz",
@@ -9183,6 +9216,15 @@
 				"node": ">=12"
 			}
 		},
+		"node_modules/universalify": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmmirror.com/universalify/-/universalify-2.0.1.tgz",
+			"integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+			"dev": true,
+			"engines": {
+				"node": ">= 10.0.0"
+			}
+		},
 		"node_modules/unplugin": {
 			"version": "1.10.0",
 			"resolved": "https://registry.npmmirror.com/unplugin/-/unplugin-1.10.0.tgz",
@@ -9526,6 +9568,90 @@
 				}
 			}
 		},
+		"node_modules/vite-plugin-compression": {
+			"version": "0.5.1",
+			"resolved": "https://registry.npmmirror.com/vite-plugin-compression/-/vite-plugin-compression-0.5.1.tgz",
+			"integrity": "sha512-5QJKBDc+gNYVqL/skgFAP81Yuzo9R+EAf19d+EtsMF/i8kFUpNi3J/H01QD3Oo8zBQn+NzoCIFkpPLynoOzaJg==",
+			"dev": true,
+			"dependencies": {
+				"chalk": "^4.1.2",
+				"debug": "^4.3.3",
+				"fs-extra": "^10.0.0"
+			},
+			"peerDependencies": {
+				"vite": ">=2.0.0"
+			}
+		},
+		"node_modules/vite-plugin-compression/node_modules/ansi-styles": {
+			"version": "4.3.0",
+			"resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
+			"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+			"dev": true,
+			"dependencies": {
+				"color-convert": "^2.0.1"
+			},
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/ansi-styles?sponsor=1"
+			}
+		},
+		"node_modules/vite-plugin-compression/node_modules/chalk": {
+			"version": "4.1.2",
+			"resolved": "https://registry.npmmirror.com/chalk/-/chalk-4.1.2.tgz",
+			"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+			"dev": true,
+			"dependencies": {
+				"ansi-styles": "^4.1.0",
+				"supports-color": "^7.1.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/chalk?sponsor=1"
+			}
+		},
+		"node_modules/vite-plugin-compression/node_modules/color-convert": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
+			"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+			"dev": true,
+			"dependencies": {
+				"color-name": "~1.1.4"
+			},
+			"engines": {
+				"node": ">=7.0.0"
+			}
+		},
+		"node_modules/vite-plugin-compression/node_modules/color-name": {
+			"version": "1.1.4",
+			"resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
+			"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+			"dev": true
+		},
+		"node_modules/vite-plugin-compression/node_modules/has-flag": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz",
+			"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/vite-plugin-compression/node_modules/supports-color": {
+			"version": "7.2.0",
+			"resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
+			"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+			"dev": true,
+			"dependencies": {
+				"has-flag": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
 		"node_modules/vite-plugin-vue-setup-extend": {
 			"version": "0.4.0",
 			"resolved": "https://registry.npmmirror.com/vite-plugin-vue-setup-extend/-/vite-plugin-vue-setup-extend-0.4.0.tgz",
@@ -15489,6 +15615,17 @@
 			"resolved": "https://registry.npmmirror.com/fraction.js/-/fraction.js-4.3.6.tgz",
 			"integrity": "sha512-n2aZ9tNfYDwaHhvFTkhFErqOMIb8uyzSQ+vGJBjZyanAKZVbGUQ1sngfk9FdkBw7G26O7AgNjLcecLffD1c7eg=="
 		},
+		"fs-extra": {
+			"version": "10.1.0",
+			"resolved": "https://registry.npmmirror.com/fs-extra/-/fs-extra-10.1.0.tgz",
+			"integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
+			"dev": true,
+			"requires": {
+				"graceful-fs": "^4.2.0",
+				"jsonfile": "^6.0.1",
+				"universalify": "^2.0.0"
+			}
+		},
 		"fs.realpath": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmmirror.com/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -15604,6 +15741,12 @@
 				"get-intrinsic": "^1.1.3"
 			}
 		},
+		"graceful-fs": {
+			"version": "4.2.11",
+			"resolved": "https://registry.npmmirror.com/graceful-fs/-/graceful-fs-4.2.11.tgz",
+			"integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+			"dev": true
+		},
 		"graphemer": {
 			"version": "1.4.0",
 			"resolved": "https://registry.npmmirror.com/graphemer/-/graphemer-1.4.0.tgz",
@@ -16022,6 +16165,16 @@
 				}
 			}
 		},
+		"jsonfile": {
+			"version": "6.1.0",
+			"resolved": "https://registry.npmmirror.com/jsonfile/-/jsonfile-6.1.0.tgz",
+			"integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+			"dev": true,
+			"requires": {
+				"graceful-fs": "^4.1.6",
+				"universalify": "^2.0.0"
+			}
+		},
 		"jsonrepair": {
 			"version": "3.2.4",
 			"resolved": "https://registry.npmmirror.com/jsonrepair/-/jsonrepair-3.2.4.tgz",
@@ -17549,6 +17702,12 @@
 				}
 			}
 		},
+		"universalify": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmmirror.com/universalify/-/universalify-2.0.1.tgz",
+			"integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+			"dev": true
+		},
 		"unplugin": {
 			"version": "1.10.0",
 			"resolved": "https://registry.npmmirror.com/unplugin/-/unplugin-1.10.0.tgz",
@@ -17822,6 +17981,68 @@
 				}
 			}
 		},
+		"vite-plugin-compression": {
+			"version": "0.5.1",
+			"resolved": "https://registry.npmmirror.com/vite-plugin-compression/-/vite-plugin-compression-0.5.1.tgz",
+			"integrity": "sha512-5QJKBDc+gNYVqL/skgFAP81Yuzo9R+EAf19d+EtsMF/i8kFUpNi3J/H01QD3Oo8zBQn+NzoCIFkpPLynoOzaJg==",
+			"dev": true,
+			"requires": {
+				"chalk": "^4.1.2",
+				"debug": "^4.3.3",
+				"fs-extra": "^10.0.0"
+			},
+			"dependencies": {
+				"ansi-styles": {
+					"version": "4.3.0",
+					"resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
+					"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+					"dev": true,
+					"requires": {
+						"color-convert": "^2.0.1"
+					}
+				},
+				"chalk": {
+					"version": "4.1.2",
+					"resolved": "https://registry.npmmirror.com/chalk/-/chalk-4.1.2.tgz",
+					"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+					"dev": true,
+					"requires": {
+						"ansi-styles": "^4.1.0",
+						"supports-color": "^7.1.0"
+					}
+				},
+				"color-convert": {
+					"version": "2.0.1",
+					"resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
+					"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+					"dev": true,
+					"requires": {
+						"color-name": "~1.1.4"
+					}
+				},
+				"color-name": {
+					"version": "1.1.4",
+					"resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
+					"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+					"dev": true
+				},
+				"has-flag": {
+					"version": "4.0.0",
+					"resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz",
+					"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+					"dev": true
+				},
+				"supports-color": {
+					"version": "7.2.0",
+					"resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
+					"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+					"dev": true,
+					"requires": {
+						"has-flag": "^4.0.0"
+					}
+				}
+			}
+		},
 		"vite-plugin-vue-setup-extend": {
 			"version": "0.4.0",
 			"resolved": "https://registry.npmmirror.com/vite-plugin-vue-setup-extend/-/vite-plugin-vue-setup-extend-0.4.0.tgz",

package.json

@@ -73,6 +73,7 @@
 		"unplugin-auto-import": "^0.16.7",
 		"unplugin-vue-components": "^0.25.2",
 		"vite": "^4.0.0",
+		"vite-plugin-compression": "^0.5.1",
 		"vite-plugin-vue-setup-extend": "^0.4.0",
 		"vue-eslint-parser": "^9.1.0"
 	},

src/views/productCenter/productList/components/ProductSelectCard.vue

@@ -152,7 +152,7 @@ onBeforeUnmount(() => {
           :key="item.productlineId"
           shadow="hover"
           body-style="padding: 0; box-sizing: border-box; position: relative; width: 100%;"
-          class="scrollbar-demo-item"
+          class="scrollbar-demo-item mr-1.5"
           :class="{ selected: selectedCardIndex === index }"
           @click="selectCard(index, item)">
           <div class="pct-chart" :id="`chart${index}-${item.productlineId}`"></div>

vite.config.ts

@@ -4,6 +4,7 @@ import { defineConfig, loadEnv, ConfigEnv } from 'vite'
 import vueSetupExtend from 'vite-plugin-vue-setup-extend'
 import vueJsx from '@vitejs/plugin-vue-jsx'
 import AutoImport from 'unplugin-auto-import/vite'
+import compression from 'vite-plugin-compression'
 import Components from 'unplugin-vue-components/vite'
 import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 
@@ -28,6 +29,12 @@ const viteConfig = defineConfig((mode: ConfigEnv) => {
         imports: ['vue', 'vue-router', 'pinia'],
         // resolvers: [ElementPlusResolver()],
       }),
+      compression({
+        algorithm: 'gzip', // 使用 gzip 压缩
+        ext: '.gz', // 输出的文件扩展名
+        threshold: 10240, // 只有大小大于该值的资源会被压缩（默认 10KB）
+        deleteOriginFile: false, // 是否删除原始未压缩的文件
+      }),
       // Components({
       //   resolvers: [ElementPlusResolver()],
       // }),