Kaynağa Gözat

打包优化; 修改动态路由

WanGxC 8 ay önce
ebeveyn
işleme
61ac44d952
4 değiştirilmiş dosya ile 145 ekleme ve 4 silme
  1. 126 0
      package-lock.json
  2. 1 0
      package.json
  3. 2 1
      src/views/system/menu/index.vue
  4. 16 3
      vite.config.ts

+ 126 - 0
package-lock.json

@@ -48,6 +48,7 @@
 				"tailwindcss": "^3.2.7",
 				"ts-md5": "^1.3.1",
 				"upgrade": "^1.1.0",
+				"vite-plugin-compression": "^0.5.1",
 				"vue": "^3.5.0",
 				"vue-clipboard3": "^2.0.0",
 				"vue-cropper": "^1.0.8",
@@ -5952,6 +5953,20 @@
 				"url": "https://github.com/sponsors/rawify"
 			}
 		},
+		"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==",
+			"license": "MIT",
+			"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",
@@ -6132,6 +6147,12 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
+		"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==",
+			"license": "ISC"
+		},
 		"node_modules/graphemer": {
 			"version": "1.4.0",
 			"resolved": "https://registry.npmmirror.com/graphemer/-/graphemer-1.4.0.tgz",
@@ -6720,6 +6741,18 @@
 				"vanilla-picker": "^2.12.2"
 			}
 		},
+		"node_modules/jsonfile": {
+			"version": "6.1.0",
+			"resolved": "https://registry.npmmirror.com/jsonfile/-/jsonfile-6.1.0.tgz",
+			"integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+			"license": "MIT",
+			"dependencies": {
+				"universalify": "^2.0.0"
+			},
+			"optionalDependencies": {
+				"graceful-fs": "^4.1.6"
+			}
+		},
 		"node_modules/jsonrepair": {
 			"version": "3.1.0",
 			"resolved": "https://registry.npmmirror.com/jsonrepair/-/jsonrepair-3.1.0.tgz",
@@ -8856,6 +8889,15 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/universalify": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmmirror.com/universalify/-/universalify-2.0.1.tgz",
+			"integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 10.0.0"
+			}
+		},
 		"node_modules/update-browserslist-db": {
 			"version": "1.1.0",
 			"resolved": "https://registry.npmmirror.com/update-browserslist-db/-/update-browserslist-db-1.1.0.tgz",
@@ -9031,6 +9073,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==",
+			"license": "MIT",
+			"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==",
+			"license": "MIT",
+			"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==",
+			"license": "MIT",
+			"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==",
+			"license": "MIT",
+			"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==",
+			"license": "MIT"
+		},
+		"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==",
+			"license": "MIT",
+			"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==",
+			"license": "MIT",
+			"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",

+ 1 - 0
package.json

@@ -49,6 +49,7 @@
 		"tailwindcss": "^3.2.7",
 		"ts-md5": "^1.3.1",
 		"upgrade": "^1.1.0",
+		"vite-plugin-compression": "^0.5.1",
 		"vue": "^3.5.0",
 		"vue-clipboard3": "^2.0.0",
 		"vue-cropper": "^1.0.8",

+ 2 - 1
src/views/system/menu/index.vue

@@ -48,7 +48,8 @@ import XEUtils from 'xe-utils';
 import { ElMessageBox } from 'element-plus';
 import MenuTreeCom from './components/MenuTreeCom/index.vue';
 import MenuButtonCom from './components/MenuButtonCom/index.vue';
-import MenuFormCom from './components/MenuFormCom/index.vue';
+// import MenuFormCom from './components/MenuFormCom/index.vue';
+const MenuFormCom = () => import('./components/MenuFormCom/index.vue');
 import MenuFieldCom from './components/MenuFieldCom/index.vue';
 import { GetList, DelObj } from './api';
 import { successNotification } from '/@/utils/message';

+ 16 - 3
vite.config.ts

@@ -2,6 +2,7 @@ import vue from '@vitejs/plugin-vue';
 import { resolve } from 'path';
 import { ConfigEnv, defineConfig, loadEnv } from 'vite';
 import vueJsx from '@vitejs/plugin-vue-jsx';
+import compression from 'vite-plugin-compression';
 
 
 const pathResolve = (dir: string) => {
@@ -20,8 +21,14 @@ const viteConfig = defineConfig((mode: ConfigEnv) => {
   return {
     plugins: [
       vue(),
-      vueJsx()
+      vueJsx(),
       // vueSetupExtend()
+      compression({
+        algorithm: 'gzip', // 使用 gzip 压缩
+        ext: '.gz', // 输出的文件扩展名
+        threshold: 10240, // 只有大小大于该值的资源会被压缩(默认 10KB)
+        deleteOriginFile: false, // 是否删除原始未压缩的文件
+      }),
     ],
     root: process.cwd(),
     resolve: { alias },
@@ -54,8 +61,14 @@ const viteConfig = defineConfig((mode: ConfigEnv) => {
           compact: true,
           manualChunks: {
             vue: [ 'vue', 'vue-router', 'pinia' ],
-            echarts: [ 'echarts' ]
-          }
+            echarts: [ 'echarts' ],
+            elementPlus: ['element-plus'],
+          },
+          // manualChunks(id) {
+          //   if (id.includes('node_modules')) {
+          //     return 'vendor';
+          //   }
+          // }
         }
       }
     },