首屏速度优化

change_fate2026-04-28 8:01

核心思路是在减少加载量和缩短等待感知上同时发力。

🚀 第一步：按需引入（最关键）

安装 unplugin-vue-components 插件

⚡️ 第二步：代码分割与懒加载

js 复制代码

// 分割第三方库：
// vite.config.js
export default {
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          'element-plus': ['element-plus'],
          'vue-vendor': ['vue', 'vue-router', 'pinia']
        }
      }
    }
  }
}

js 复制代码

// 组件懒加载
import { defineAsyncComponent } from 'vue'
const HeavyChart = defineAsyncComponent(() => import('./HeavyChart.vue'))

🎨 第三步：优化用户体验（感知性能）

直接使用 Element Plus 骨架屏

🧹 第四步：其他辅助优化

完成前三步后，还可以检查以下几点，能进一步提速：

图片瘦身：把 PNG/JPG 图片转换为 WebP 格式，并使用 TinyPNG 等工具压缩，体积通常能减小 60% 以上。

接口调优：检查首屏是否调用了非必需的接口。将次要接口（如操作日志、统计图表）延后调用，优先保证核心数据的加载。

开启 Gzip：在 Nginx 等服务器上开启 Gzip 压缩，文本类资源（JS、CSS）能再减小 70% 左右。

预加载与预连接：对关键资源（如核心 CSS）使用；对将要请求的第三方域名（如 CDN）使用。