perf: 优化前端加载速度
- 改用 mime 标准库替代硬编码 MIME 类型(更优雅) - 全局 gzip 中间件替代手动压缩(覆盖所有响应) - ECharts 改为动态 import,首屏不再加载 1.1MB - manualChunks 拆分 vue-vendor/ui-vendor 减小主包 - 首屏 gzip 体积从 544KB 降至 236KB(减少 57%)
This commit is contained in:
@@ -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')
|
||||
|
||||
@@ -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'],
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user