feat: 打包优化

This commit is contained in:
2026-03-24 13:25:35 +08:00
parent 821c95148e
commit 60ebdb3d77
4 changed files with 211 additions and 17 deletions

102
package-lock.json generated
View File

@@ -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",

View File

@@ -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",

View File

@@ -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>

View File

@@ -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访问
port: 8088, // 根据环境设置端口
open: true, // 自动打开浏览器
strictPort: true, // 如果端口已被占用,则尝试下一个可用端口
host: '0.0.0.0',
port: 8088,
open: true,
strictPort: true,
hmr: {
overlay: true
},
proxy: {
'/api': {
//'/api'是自行设置的请求前缀
target: env.VITE_APP_URL,
changeOrigin: true, //用于控制请求头中的host值
rewrite: (path) => path.replace(/^\/api/, '/api') //路径重写正则匹配以api开头的路径为空将请求前缀删除
changeOrigin: true,
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
}
}
}