Explorar o código

fix: 打包优化

Gaokun Wang hai 2 semanas
pai
achega
7b722d69c6
Modificáronse 7 ficheiros con 54 adicións e 15 borrados
  1. 3 0
      .env.production
  2. 2 1
      package.json
  3. 27 0
      plugins/compression.ts
  4. 2 1
      plugins/index.ts
  5. 17 0
      pnpm-lock.yaml
  6. 0 12
      src/types/auto-components.d.ts
  7. 3 1
      vite.config.ts

+ 3 - 0
.env.production

@@ -10,6 +10,9 @@ VITE_API_PREFIX_PATH = /pro-api
 # mock接口前缀 勿改
 VITE_MOCK_API_PREFIX_PATH = /mock-api
 
+# 是否在打包时开启压缩,支持 gzip 和 brotli
+VITE_BUILD_COMPRESS = gzip
+
 # 是否开启mock
 VITE_USE_MOCK = false
 

+ 2 - 1
package.json

@@ -11,7 +11,7 @@
   "scripts": {
     "i": "pnpm install",
     "dev": "vite --mode development",
-    "build": "vue-tsc -b && vite build --mode production",
+    "build": "vue-tsc --noEmit && vite build --mode production",
     "preview": "vite preview",
     "prepare": "husky install",
     "lint:lint-staged": "lint-staged -c ./.husky/lint-staged-c.cjs",
@@ -74,6 +74,7 @@
     "unplugin-icons": "^22.1.0",
     "unplugin-vue-components": "^28.8.0",
     "vite": "^7.0.4",
+    "vite-plugin-compression": "^0.5.1",
     "vite-plugin-ejs": "^1.7.0",
     "vite-plugin-svg-icons": "^2.0.1",
     "vite-plugin-vue-setup-extend": "^0.4.0",

+ 27 - 0
plugins/compression.ts

@@ -0,0 +1,27 @@
+import compression from 'vite-plugin-compression'
+
+export default (env: ImportMetaEnv) => {
+  const { VITE_BUILD_COMPRESS } = env
+  const plugin: any[] = []
+  if (VITE_BUILD_COMPRESS) {
+    const compressList = VITE_BUILD_COMPRESS.split(',')
+    if (compressList.includes('gzip')) {
+      plugin.push(
+        compression({
+          ext: '.gz',
+          deleteOriginFile: false
+        })
+      )
+    }
+    if (compressList.includes('brotli')) {
+      plugin.push(
+        compression({
+          ext: '.br',
+          algorithm: 'brotliCompress',
+          deleteOriginFile: false
+        })
+      )
+    }
+  }
+  return plugin
+}

+ 2 - 1
plugins/index.ts

@@ -7,6 +7,7 @@ import initIcons from './import-icons'
 import initSvgIcons from './svg-icon'
 import { ViteEjsPlugin } from 'vite-plugin-ejs'
 import vueJsx from '@vitejs/plugin-vue-jsx'
+import initCompression from './compression'
 /**
  * 初始创建 vite 插件
  * @param viteEnv
@@ -22,7 +23,7 @@ export const initVitePlugins = (viteEnv: ImportMetaEnv, isBuild = false): (Plugi
     VueSetupExtend(),
     // 自动导入
     initAutoImport(),
-    // initAutoTinyImport(),
+    initCompression(viteEnv),
     initComponents(),
     initIcons(),
     initSvgIcons(isBuild)

+ 17 - 0
pnpm-lock.yaml

@@ -156,6 +156,9 @@ importers:
       vite:
         specifier: ^7.0.4
         version: 7.0.4(@types/node@24.0.13)(jiti@2.4.2)(sass@1.89.2)(yaml@2.8.0)
+      vite-plugin-compression:
+        specifier: ^0.5.1
+        version: 0.5.1(vite@7.0.4(@types/node@24.0.13)(jiti@2.4.2)(sass@1.89.2)(yaml@2.8.0))
       vite-plugin-ejs:
         specifier: ^1.7.0
         version: 1.7.0(vite@7.0.4(@types/node@24.0.13)(jiti@2.4.2)(sass@1.89.2)(yaml@2.8.0))
@@ -3687,6 +3690,11 @@ packages:
     resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
     engines: {node: '>= 0.8'}
 
+  vite-plugin-compression@0.5.1:
+    resolution: {integrity: sha512-5QJKBDc+gNYVqL/skgFAP81Yuzo9R+EAf19d+EtsMF/i8kFUpNi3J/H01QD3Oo8zBQn+NzoCIFkpPLynoOzaJg==}
+    peerDependencies:
+      vite: '>=2.0.0'
+
   vite-plugin-ejs@1.7.0:
     resolution: {integrity: sha512-JNP3zQDC4mSbfoJ3G73s5mmZITD8NGjUmLkq4swxyahy/W0xuokK9U9IJGXw7KCggq6UucT6hJ0p+tQrNtqTZw==}
     peerDependencies:
@@ -7657,6 +7665,15 @@ snapshots:
 
   vary@1.1.2: {}
 
+  vite-plugin-compression@0.5.1(vite@7.0.4(@types/node@24.0.13)(jiti@2.4.2)(sass@1.89.2)(yaml@2.8.0)):
+    dependencies:
+      chalk: 4.1.2
+      debug: 4.4.1
+      fs-extra: 10.1.0
+      vite: 7.0.4(@types/node@24.0.13)(jiti@2.4.2)(sass@1.89.2)(yaml@2.8.0)
+    transitivePeerDependencies:
+      - supports-color
+
   vite-plugin-ejs@1.7.0(vite@7.0.4(@types/node@24.0.13)(jiti@2.4.2)(sass@1.89.2)(yaml@2.8.0)):
     dependencies:
       ejs: 3.1.10

+ 0 - 12
src/types/auto-components.d.ts

@@ -20,15 +20,12 @@ declare module 'vue' {
     Avatar: typeof import('./../layouts/components/AppTools/Avatar.vue')['default']
     ColSetting: typeof import('./../components/ProTable/ColSetting.vue')['default']
     ConfigDrawer: typeof import('./../views/system/config/components/ConfigDrawer.vue')['default']
-    copy: typeof import('./../components/Upload/UploadButton copy.vue')['default']
     DictDrawer: typeof import('./../views/system/dict/components/DictDrawer.vue')['default']
     EcoDialog: typeof import('./../components/EcoDialog/index.vue')['default']
     EcoDialogForm: typeof import('./../components/EcoDialogForm/index.vue')['default']
     EcoDrawer: typeof import('./../components/EcoDrawer/index.vue')['default']
-    EcoDrawerForm: typeof import('./../components/EcoDrawerForm/index.vue')['default']
     EcoForm: typeof import('./../components/EcoForm/index.vue')['default']
     EcoItem: typeof import('./../components/EcoForm/components/EcoItem.vue')['default']
-    EcoUser: typeof import('./../components/EcoUser/index.vue')['default']
     ElAvatar: typeof import('element-plus/es')['ElAvatar']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCard: typeof import('element-plus/es')['ElCard']
@@ -73,21 +70,13 @@ declare module 'vue' {
     ElTree: typeof import('element-plus/es')['ElTree']
     ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
     ElUpload: typeof import('element-plus/es')['ElUpload']
-    FilesDrawer: typeof import('./../views/system/files/components/FilesDrawer.vue')['default']
-    Form: typeof import('./../views/system/org/components/form.vue')['default']
     Grid: typeof import('./../components/Grid/index.vue')['default']
     GridItem: typeof import('./../components/Grid/GridItem.vue')['default']
-    HelloWorld: typeof import('./../components/HelloWorld.vue')['default']
     IconChoose: typeof import('./../components/IconChoose/index.vue')['default']
     Loading: typeof import('./../components/Loading/index.vue')['default']
-    LoginForm: typeof import('./../views/login/components/LoginForm.vue')['default']
     MenuDrawer: typeof import('./../views/system/menu/components/MenuDrawer.vue')['default']
-    MenuItem: typeof import('./../layouts/components/AppMenu/MenuItem.vue')['default']
-    ModifyPassword: typeof import('./../views/system/user/components/ModifyPassword.vue')['default']
-    ModifyPasswordDialog: typeof import('./../views/system/user/components/ModifyPasswordDialog.vue')['default']
     MoreButton: typeof import('./../layouts/components/AppTabs/MoreButton.vue')['default']
     OrgDrawer: typeof import('./../views/system/org/components/OrgDrawer.vue')['default']
-    OrgForm: typeof import('./../views/system/org/components/orgForm.vue')['default']
     Pagination: typeof import('./../components/ProTable/Pagination.vue')['default']
     PasswordDialog: typeof import('./../views/system/user/components/PasswordDialog.vue')['default']
     PermissionsDrawer: typeof import('./../views/system/role/components/PermissionsDrawer.vue')['default']
@@ -102,7 +91,6 @@ declare module 'vue' {
     SvgIcon: typeof import('./../components/SvgIcon/index.vue')['default']
     TableColumn: typeof import('./../components/ProTable/TableColumn.vue')['default']
     TreeFilter: typeof import('./../components/TreeFilter/index.vue')['default']
-    Upload: typeof import('./../components/Upload/index.vue')['default']
     UploadButton: typeof import('./../components/Upload/UploadButton.vue')['default']
     UploadDrop: typeof import('./../components/Upload/UploadDrop.vue')['default']
     UserDrawer: typeof import('./../views/system/user/components/UserDrawer.vue')['default']

+ 3 - 1
vite.config.ts

@@ -3,7 +3,8 @@ import { initVitePlugins } from './plugins'
 import { initProxy } from './plugins/proxy'
 import { resolve } from 'path'
 import { wrapperEnv } from './getEnv'
-const pathSrc = resolve(__dirname, 'src')
+const pathSrc = resolve(__dirname, './src')
+const pathRoot = resolve(__dirname, './')
 // https://vite.dev/config/
 export default defineConfig(({ mode, command }: ConfigEnv): UserConfig => {
   const root = process.cwd()
@@ -17,6 +18,7 @@ export default defineConfig(({ mode, command }: ConfigEnv): UserConfig => {
     },
     resolve: {
       alias: {
+        '~': pathRoot,
         '@': pathSrc
       }
     },