一、什么是“首屏优化”？
用户访问系统的第一个页面加载速度，就是“首屏性能”。在广告平台后台中，首页承载了数据看板、任务提醒、全局操作入口，如果加载慢，用户体验将大打折扣。
而“优化首屏”的关键，是把握四个维度：
- 网络加载
- 渲染流程
- 代码策略
- 用户感知
二、第一境界：网络加载优化
目标：越快拿到静态资源越好。
1. 静态资源按需加载
// vite.config.ts
build: {
rollupOptions: {
output: {
manualChunks: {
vue: ['vue', 'vue-router'],
naive: ['naive-ui']
}
}
}
}
将组件库、框架拆出独立 chunk，提升主 bundle 首包速度。
2. 启用 Gzip + CDN
location ~* .(js|css)$ {
gzip_static on;
expires 30d;
}
部署后将 dist 上传至 CDN，可大幅降低资源加载时间。
3. 图片压缩 + 懒加载
首页包含 LOGO、图标等：全部压缩 + 采用 webp 格式，图片使用 v-lazy 指令延迟加载。
三、第二境界：渲染流程优化
目标：避免页面卡顿和空白延迟。
1. Skeleton 骨架屏方案
首页关键模块加载前展示骨架屏，防止空白：
<n-skeleton :loading="loading">
<DashboardContent />
</n-skeleton>
2. 拆分 Dashboard 组件为异步模块
const Dashboard = defineAsyncComponent(() => import('@/modules/dashboard'))
配合 Vite 自动懒加载。
3. ECharts 图表初始化延迟处理
图表组件在容器未挂载时强制初始化会卡顿。
处理方式：
onMounted(() => {
nextTick(() => renderChart())
})
四、第三境界：代码体积控制
目标：让首屏 js 越少越好。
1. 组件按需引入
使用 unplugin-vue-components + Naive UI 插件：
import Components from 'unplugin-vue-components/vite'
import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'
plugins: [
Components({ resolvers: [NaiveUiResolver()] })
]
2. 动态导入非首屏模块
const Report = defineAsyncComponent(() => import('@/modules/report'))
3. 第三方依赖精简
- 用 axios 替代重型请求库
- lodash 仅引入所需方法：
import debounce from 'lodash/debounce'
4. Tree Shaking 检查
使用 vite-plugin-inspect 检查未被 shake 掉的无效代码。
五、第四境界：用户感知优化
目标：即使没加载完，也让用户觉得“快”。
1. 预加载核心数据（API 层）
登录后立即预加载首页数据：
await Promise.all([
fetchOverview(),
fetchUserInfo()
])
