perf: 优化前端加载速度

- 改用 mime 标准库替代硬编码 MIME 类型(更优雅)
- 全局 gzip 中间件替代手动压缩(覆盖所有响应)
- ECharts 改为动态 import,首屏不再加载 1.1MB
- manualChunks 拆分 vue-vendor/ui-vendor 减小主包
- 首屏 gzip 体积从 544KB 降至 236KB(减少 57%)
This commit is contained in:
2026-05-05 13:18:40 +08:00
parent bc30afe106
commit d584b578f1
4 changed files with 387 additions and 151 deletions
+4 -2
View File
@@ -1,6 +1,5 @@
<script setup lang="ts">
import { ArrowRight, DollarSign, Key, LayoutGrid, Loader2, Ticket, Users } from 'lucide-vue-next'
import * as echarts from 'echarts'
import { useColorMode } from '@vueuse/core'
import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
import { useI18n } from 'vue-i18n'
@@ -237,7 +236,10 @@ async function initMapChart() {
return
try {
const worldResponse = await fetch('/world.json')
const [{ default: echarts }, worldResponse] = await Promise.all([
import('echarts'),
fetch('/world.json'),
])
if (!worldResponse.ok) {
throw new Error('Failed to load world map data')
+4
View File
@@ -112,6 +112,10 @@ export default defineConfig({
},
entryFileNames: 'assets/[name]-[hash].js',
assetFileNames: 'assets/[name]-[hash].[ext]',
manualChunks: {
'vue-vendor': ['vue', 'vue-router', 'vue-i18n', 'pinia', '@vueuse/core'],
'ui-vendor': ['reka-ui', 'class-variance-authority', 'clsx', 'tailwind-merge', 'lucide-vue-next'],
},
},
},
},