feat: 打包优化

package-lock.json

@@ -39,6 +39,7 @@
         "lint-staged": "^13.2.1",
         "npm-run-all": "^4.1.5",
         "prettier": "^2.8.4",
+        "terser": "^5.46.1",
         "typescript": "~4.8.4",
         "unplugin-auto-import": "^0.15.3",
         "unplugin-vue-components": "^0.24.1",
@@ -668,6 +669,17 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@jridgewell/source-map": {
+      "version": "0.3.11",
+      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.11.tgz",
+      "integrity": "sha512-ZMp1V8ZFcPG5dIWnQLr3NSI1MiCU7UETdS/A0G8V/XWHvJv3ZsFqutJn1Y5RPmAPX6F3BiE397OqveU/9NCuIA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.25"
+      }
+    },
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.5.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
@@ -1852,6 +1864,13 @@
         "node": ">=8"
       }
     },
+    "node_modules/buffer-from": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
+      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/cache-base": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/cache-base/-/cache-base-1.0.1.tgz",
@@ -6999,6 +7018,17 @@
         "urix": "^0.1.0"
       }
     },
+    "node_modules/source-map-support": {
+      "version": "0.5.21",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
+      "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "buffer-from": "^1.0.0",
+        "source-map": "^0.6.0"
+      }
+    },
     "node_modules/source-map-url": {
       "version": "0.4.1",
       "resolved": "https://registry.npmmirror.com/source-map-url/-/source-map-url-0.4.1.tgz",
@@ -7606,6 +7636,32 @@
         "node": ">= 10"
       }
     },
+    "node_modules/terser": {
+      "version": "5.46.1",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.46.1.tgz",
+      "integrity": "sha512-vzCjQO/rgUuK9sf8VJZvjqiqiHFaZLnOiimmUuOKODxWL8mm/xua7viT7aqX7dgPY60otQjUotzFMmCB4VdmqQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "@jridgewell/source-map": "^0.3.3",
+        "acorn": "^8.15.0",
+        "commander": "^2.20.0",
+        "source-map-support": "~0.5.20"
+      },
+      "bin": {
+        "terser": "bin/terser"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/terser/node_modules/commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmmirror.com/text-table/-/text-table-0.2.0.tgz",
@@ -9075,6 +9131,16 @@
       "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
       "dev": true
     },
+    "@jridgewell/source-map": {
+      "version": "0.3.11",
+      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.11.tgz",
+      "integrity": "sha512-ZMp1V8ZFcPG5dIWnQLr3NSI1MiCU7UETdS/A0G8V/XWHvJv3ZsFqutJn1Y5RPmAPX6F3BiE397OqveU/9NCuIA==",
+      "dev": true,
+      "requires": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.25"
+      }
+    },
     "@jridgewell/sourcemap-codec": {
       "version": "1.5.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
@@ -9937,6 +10003,12 @@
         "fill-range": "^7.0.1"
       }
     },
+    "buffer-from": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
+      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
+      "dev": true
+    },
     "cache-base": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/cache-base/-/cache-base-1.0.1.tgz",
@@ -13802,6 +13874,16 @@
         "urix": "^0.1.0"
       }
     },
+    "source-map-support": {
+      "version": "0.5.21",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
+      "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
+      "dev": true,
+      "requires": {
+        "buffer-from": "^1.0.0",
+        "source-map": "^0.6.0"
+      }
+    },
     "source-map-url": {
       "version": "0.4.1",
       "resolved": "https://registry.npmmirror.com/source-map-url/-/source-map-url-0.4.1.tgz",
@@ -14285,6 +14367,26 @@
         }
       }
     },
+    "terser": {
+      "version": "5.46.1",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.46.1.tgz",
+      "integrity": "sha512-vzCjQO/rgUuK9sf8VJZvjqiqiHFaZLnOiimmUuOKODxWL8mm/xua7viT7aqX7dgPY60otQjUotzFMmCB4VdmqQ==",
+      "dev": true,
+      "requires": {
+        "@jridgewell/source-map": "^0.3.3",
+        "acorn": "^8.15.0",
+        "commander": "^2.20.0",
+        "source-map-support": "~0.5.20"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "2.20.3",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+          "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+          "dev": true
+        }
+      }
+    },
     "text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmmirror.com/text-table/-/text-table-0.2.0.tgz",

package.json

@@ -43,6 +43,7 @@
     "lint-staged": "^13.2.1",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.8.4",
+    "terser": "^5.46.1",
     "typescript": "~4.8.4",
     "unplugin-auto-import": "^0.15.3",
     "unplugin-vue-components": "^0.24.1",

src/views/AwardPage/contestants.vue

@@ -40,7 +40,7 @@
       v-if="!isCompleted && !isExpired"
       :class="{ mobile: isMobile, tablet: isTablet }"
     >
-      <div class="form-header" v-if="showStep(0)">
+      <div class="form-header" v-if="showStep(0) && isMobile || isTablet">
         <div class="form-title poppins-bold">
           {{ t('AwardApply.emailVerification') }}
         </div>

vite.config.ts

@@ -7,7 +7,7 @@ import Components from 'unplugin-vue-components/vite'
 import DefineOptions from 'unplugin-vue-define-options/vite'
 import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
 import path from 'path'
-import { ElementPlusResolver, AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
+import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
 
 // console.log(process)
 // console.log(import.meta.env.VITE_APP_URL)
@@ -16,14 +16,14 @@ import { ElementPlusResolver, AntDesignVueResolver } from 'unplugin-vue-componen
 
 export default defineConfig(({ mode }) => {
   const env = loadEnv(mode, process.cwd())
+  const isProduction = mode === 'production'
 
   return {
     plugins: [
       vue(),
       DefineOptions(),
-      // ...
       AutoImport({
-        resolvers: [ElementPlusResolver()],
+        resolvers: [],
         imports: [
           'vue',
           'vue-router',
@@ -44,17 +44,15 @@ export default defineConfig(({ mode }) => {
               'isUndefined'
             ]
           }
-        ],
+        ]
       }),
       Components({
-        resolvers: [ElementPlusResolver(), AntDesignVueResolver({ importStyle: false })]
+        resolvers: [AntDesignVueResolver({ importStyle: false })]
       }),
       createSvgIconsPlugin({
-        // 指定需要缓存的图标文件夹
         iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
-        // 指定symbolId格式
         symbolId: 'icon-[dir]-[name]',
-        inject: 'body-last' // 注入位置优化
+        inject: 'body-last'
       })
     ],
     define: {
@@ -67,7 +65,6 @@ export default defineConfig(({ mode }) => {
             'primary-color': '#ec6800'
           },
           javascriptEnabled: true,
-          // 全局导入less变量文件
           additionalData: `@import "${path.resolve(__dirname, 'src/assets/css/style.less')}";`
         }
       }
@@ -79,19 +76,113 @@ export default defineConfig(({ mode }) => {
       }
     },
     server: {
-      host: '0.0.0.0', // 允许局域网内的IP访问
+      host: '0.0.0.0',
-      port: 8088, // 根据环境设置端口
+      port: 8088,
-      open: true, // 自动打开浏览器
+      open: true,
-      strictPort: true, // 如果端口已被占用，则尝试下一个可用端口
+      strictPort: true,
       hmr: {
         overlay: true
       },
       proxy: {
         '/api': {
-          //'/api'是自行设置的请求前缀
           target: env.VITE_APP_URL,
-          changeOrigin: true, //用于控制请求头中的host值
+          changeOrigin: true,
-          rewrite: (path) => path.replace(/^\/api/, '/api') //路径重写，（正则）匹配以api开头的路径为空（将请求前缀删除）
+          rewrite: (path) => path.replace(/^\/api/, '/api')
+        }
+      }
+    },
+
+    // ========== 打包配置 ==========
+    build: {
+      // 构建目标浏览器
+      target: 'es2015',
+      // 是否生成 sourcemap
+      sourcemap: isProduction ? false : 'eval',
+      // 打包文件输出目录
+      outDir: 'dist',
+      // 静态资源输出目录（相对于 outDir）
+      assetsDir: 'assets',
+      // 小于此阈值的导入将内联为 base64
+      assetsInlineLimit: 4096,
+      // 启用 CSS 代码分割
+      cssCodeSplit: true,
+      // 公共基础路径
+      publicDir: 'public',
+      // 启用 gzip 压缩大小限制
+      chunkSizeWarningLimit: 500,
+      // 自定义 chunk 分包策略
+      rollupOptions: {
+        output: {
+          // 静态资源打包命名
+          assetFileNames: (assetInfo) => {
+            const info = assetInfo.name || ''
+            if (/\.(woff|woff2?|eot|ttf|otf)$/i.test(info)) {
+              return 'assets/fonts/[name]-[hash][extname]'
+            }
+            if (/\.(png|jpe?g|gif|svg|webp|avif|ico)$/i.test(info)) {
+              return 'assets/images/[name]-[hash][extname]'
+            }
+            if (/\.(mp4|webm|ogg|mp3|wav|flac|aac)$/i.test(info)) {
+              return 'assets/media/[name]-[hash][extname]'
+            }
+            return 'assets/[name]-[hash][extname]'
+          },
+          // chunk 分包命名
+          chunkFileNames: 'assets/js/[name]-[hash].js',
+          // 入口文件命名
+          entryFileNames: 'assets/js/[name]-[hash].js',
+          // 手动分包策略
+          manualChunks: {
+            // 核心框架
+            'vue-core': ['vue', 'vue-router', 'pinia', 'pinia-plugin-persistedstate'],
+            // 国际化
+            'vue-i18n-core': ['vue-i18n'],
+            // UI 框架
+            'ant-design': ['ant-design-vue'],
+            // 工具库
+            'utils': ['lodash-es', 'axios'],
+            // 其他依赖
+            'vendor': ['gsap', 'crypto-js']
+          }
+        }
+      },
+      // 依赖预构建优化
+      optimizeDeps: {
+        include: [
+          'vue',
+          'vue-router',
+          'pinia',
+          'vue-i18n',
+          'ant-design-vue',
+          'axios',
+          'lodash-es',
+          'gsap',
+          'crypto-js'
+        ]
+      },
+      // 压缩配置
+      minify: 'terser',
+      terserOptions: {
+        compress: {
+          drop_console: isProduction, // 生产环境移除 console
+          drop_debugger: isProduction, // 生产环境移除 debugger
+          pure_funcs: isProduction ? ['console.log'] : []
+        },
+        format: {
+          comments: false // 移除注释
+        }
+      }
+    },
+
+    // 预览服务器配置
+    preview: {
+      host: '0.0.0.0',
+      port: 8088,
+      open: true,
+      proxy: {
+        '/api': {
+          target: env.VITE_APP_URL,
+          changeOrigin: true
         }
       }
     }