前端性能优化实战：首屏加载从5s降到1s的完整方案（附代码）

分类：前端 | 标签：性能优化、Vite、懒加载、前端工程化

我接手过一个Vue3后台项目，首屏加载5.2秒，用户反馈"太卡了"。

花了2天优化，最终降到1.1秒。以下是完整的优化过程和代码，你可以直接照搬。

第一步：诊断问题

用Chrome DevTools的Lighthouse跑一次，得到几个关键数据：

• First Contentful Paint：3.8s
• Largest Contentful Paint：5.2s
• Total Bundle Size：2.4MB
• 首屏请求数：47个

问题很明显——打包体积太大，请求太多，没有做任何优化。

第二步：路由懒加载（省60%首屏体积）

原来30个页面全部同步导入：

// ❌ 所有页面同步加载
import Dashboard from '@/views/Dashboard.vue'
import UserList from '@/views/UserList.vue'
import OrderList from '@/views/OrderList.vue'
// ... 27个页面

改成懒加载：

// ✅ 路由懒加载
const routes = [
  {
    path: '/dashboard',
    component: () => import('@/views/Dashboard.vue'),
  },
  {
    path: '/users',
    component: () => import('@/views/UserList.vue'),
  },
  // 只有访问时才加载
]

效果：首屏JS从2.1MB降到580KB。单这一步就省了72%。

第三步：第三方库按需引入（省30%体积）

打包分析发现lodash占了71KB，但实际只用了3个函数：

// ❌ 全量引入
import _ from 'lodash'
_.get(obj, 'a.b.c')
_.debounce(fn, 300)
_.cloneDeep(data)

// ✅ 按需引入lodash-es（支持tree-shaking）
import { get } from 'lodash-es'
import { debounce } from 'lodash-es'
import { cloneDeep } from 'lodash-es'

Element Plus也是全量引入的：

// ❌ 全量引入Element Plus（500KB+）
import ElementPlus from 'element-plus'
app.use(ElementPlus)

// ✅ 按需自动导入
// vite.config.js
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default {
  plugins: [
    AutoImport({ resolvers: [ElementPlusResolver()] }),
    Components({ resolvers: [ElementPlusResolver()] }),
  ],
}

效果：vendor.js从1.6MB降到420KB。

第四步：图片优化（请求数减半）

47个首屏请求中，28个是图片。解决方案：

<!-- ❌ 直接加载大图 -->
<img src="/images/banner-2mb.jpg" />

<!-- ✅ 懒加载 + WebP + 响应式 -->
<img
  src="/images/banner-placeholder.jpg"
  data-src="/images/banner.webp"
  loading="lazy"
  decoding="async"
  width="1200"
  height="400"
  alt="首页banner"
/>

配合图片压缩插件：

// vite.config.js
import viteImagemin from 'vite-plugin-imagemin'

export default {
  plugins: [
    viteImagemin({
      webp: { quality: 75 },
      optipng: { optimizationLevel: 7 },
    }),
  ],
}

效果：图片总体积从3.2MB降到680KB，首屏请求从47降到19。

第五步：开启Gzip + 分包策略

// vite.config.js
import viteCompression from 'vite-plugin-compression'

export default {
  plugins: [
    viteCompression({ algorithm: 'gzip', threshold: 10240 }),
  ],
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          'vue-vendor': ['vue', 'vue-router', 'pinia'],
          'ui-vendor': ['element-plus'],
          'utils-vendor': ['axios', 'dayjs', 'lodash-es'],
        },
      },
    },
  },
}

效果：传输体积再降50%，vendor chunk分成3个小包，利用浏览器并行下载。

第六步：预加载关键资源

<!-- index.html中添加 -->
<link rel="preload" href="/fonts/main.woff2" as="font" crossorigin />
<link rel="preconnect" href="https://api.example.com" />
<link rel="dns-prefetch" href="https://cdn.example.com" />

最终效果对比

指标	优化前	优化后	提升
FCP	3.8s	0.8s	-79%
LCP	5.2s	1.1s	-79%
首屏JS	2.1MB	180KB(gzip)	-91%
请求数	47	19	-60%
Lighthouse	38分	92分	+142%

优化checklist（直接复制用）

• 路由懒加载
• 第三方库按需引入（lodash-es、组件库auto-import）
• 图片懒加载 + WebP格式
• 开启Gzip压缩
• 合理分包（manualChunks）
• 预加载关键资源（preload/preconnect）
• 用rollup-plugin-visualizer分析打包体积

这6步走完，90%的前端项目性能问题都能解决。

---

我是前端老兵AI，9年+前端工程师，专注前端实战+AI编程提效

📦 加微信lxxs1203，备注"掘金"，领取《前端+AI编程实战干货包》

🎬 更多实操视频 → B站搜索：前端老兵AI

📱 公众号搜索「前端老兵之AI」，持续更新深度技术文章