SPA 首屏加载速度慢怎么解决？

掘金前端

前端笃行

2026年2月27日 17:00

一、问题根源拆解：为什么 SPA 首屏会这么慢？

在动手优化前，先明确核心瓶颈，确保优化方向精准：

资源体积过大：打包后 app.js 体积臃肿，包含大量未使用的代码（冗余代码）；
脚本阻塞渲染：SPA 需加载完完整 JS 才能渲染首屏，JS 解析 / 执行时间过长导致白屏；
网络传输低效：未启用 CDN、未开启 Gzip，资源传输耗时久；
缓存未命中：静态资源未设置合理缓存策略，每次请求都重新下载；
重复请求 / 资源：多入口重复加载相同 JS/CSS/ 图片资源。

二、核心解决方案：分 5 大维度落地优化

维度 1：减小入口文件体积（最立竿见影）

入口文件（如 app.js）是首屏加载的核心瓶颈，需通过「代码分割、剔除冗余、按需加载」大幅减小体积。

1.1 路由懒加载（必做）

将路由按模块分割，实现「首屏只加载当前页面需要的代码」，Vue2/Vue3 通用配置：

Vue3 配置（`src/router/index.js`）

import { createRouter, createWebHashHistory } from 'vue-router'

// 路由懒加载：每个路由对应一个独立 chunk
const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import(/* webpackChunkName: "home" */ '@/views/Home.vue')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '@/views/About.vue')
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

Vue2 配置（`src/router/index.js`）

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: () => import(/* webpackChunkName: "home" */ '@/views/Home.vue')
    },
    {
      path: '/about',
      name: 'About',
      component: () => import(/* webpackChunkName: "about" */ '@/views/About.vue')
    }
  ]
})

1.2 UI 框架按需加载（必做）

避免一次性引入完整 UI 框架（如 ElementUI、Ant Design Vue），仅引入使用的组件：

Vue3 （Element Plus 按需加载）

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
// 按需引入 Element Plus 组件
import { ElButton, ElInput } from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
// 注册需要的组件
app.use(ElButton)
app.use(ElInput)
app.mount('#app')

Vue2 （Element UI 按需加载）

// src/main.js
import Vue from 'vue'
import App from './App.vue'
// 按需引入 Element UI 组件
import { Button, Input } from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(Button)
Vue.use(Input)
Vue.config.productionTip = false
new Vue({ render: h => h(App) }).$mount('#app')

1.3 移除冗余代码（Webpack 配置）

在 vue.config.js 中添加配置，自动剔除未使用的代码（Tree Shaking）：

// vue.config.js
module.exports = {
  configureWebpack: {
    optimization: {
      usedExports: true, // 开启 Tree Shaking
      splitChunks: { // 代码分割：提取公共代码
        chunks: 'all',
        cacheGroups: {
          vendor: {
            test: /[\\/]node_modules[\\/]/,
            name: 'chunk-vendors',
            priority: -10
          },
          common: {
            name: 'chunk-common',
            minChunks: 2,
            priority: -20,
            reuseExistingChunk: true
          }
        }
      }
    }
  }
}

维度 2：静态资源本地缓存（提升二次加载速度）

通过设置浏览器缓存，让用户二次访问时直接读取本地资源，大幅提升加载速度。

2.1 配置 Webpack 输出哈希（必做）

打包时为静态文件添加内容哈希，确保文件更新后浏览器能识别新文件：

// vue.config.js
module.exports = {
  filenameHashing: true, // 开启文件哈希
  outputDir: 'dist',
  assetsDir: 'static'
}

2.2 Nginx 缓存配置（服务端落地）

若使用 Nginx 部署，添加以下配置，设置缓存过期时间：

# 配置静态资源缓存
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
    expires 30d; # 缓存 30 天
    add_header Cache-Control "public, max-age=2592000";
    add_header ETag ""; # 禁用 ETag（可选）
}

维度 3：图片资源压缩与优化（减少网络请求耗时）

图片是首屏资源体积的主要贡献者，需通过压缩、懒加载、CDN 优化。

3.1 图片压缩（构建时自动压缩）

使用 image-webpack-loader 压缩图片：

npm install image-webpack-loader --save-dev

配置 vue.config.js：

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('images')
      .use('image-webpack-loader')
      .loader('image-webpack-loader')
      .options({
        mozjpeg: { progressive: true, quality: 65 }, // 压缩 JPG
        optipng: { enabled: false }, // 压缩 PNG
        pngquant: { quality: [0.6, 0.8] } // 压缩 PNG
      })
  }
}

3.2 图片懒加载（仅加载可视区域图片）

使用 Vue 官方插件 vue-lazyload：

npm install vue-lazyload --save

// src/main.js
import Vue from 'vue'
import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload, {
  loading: require('@/assets/images/loading.png'), // 加载中占位图
  error: require('@/assets/images/error.png') // 加载失败占位图
})

组件中使用

<template>
  <img v-lazy="imageUrl" alt="懒加载图片" />
</template>

维度 4：开启 Gzip 压缩（大幅减小传输体积）

Gzip 压缩可将 JS/CSS 体积压缩 60%-80%，是提升首屏速度的关键服务端配置。

4.1 Nginx 开启 Gzip（必做）

# 开启 Gzip
gzip on;
# 压缩文件类型
gzip_types text/plain text/css application/javascript application/json application/xml application/rss+xml text/xml text/javascript image/svg+xml;
# 压缩级别（1-9，数值越高压缩率越高，消耗 CPU 越多）
gzip_comp_level 6;
# 仅压缩大于 1k 的文件
gzip_min_length 1024;
# 压缩响应头
gzip_vary on;

4.2 前端构建时生成 Gzip 文件

// vue.config.js
const CompressionWebpackPlugin = require('compression-webpack-plugin')

module.exports = {
  configureWebpack: {
    plugins: [
      new CompressionWebpackPlugin({
        algorithm: 'gzip', // 压缩算法
        test: /\.(js|css|json|svg)$/, // 压缩哪些文件
        threshold: 10240, // 仅压缩大于 10k 的文件
        minRatio: 0.8 // 压缩率小于 0.8 才压缩
      })
    ]
  }
}

维度 5：解决脚本阻塞渲染（让首屏快速显示）

PA 中 JS 加载 / 解析 / 执行会阻塞 DOM 渲染，需通过「预加载、 defer、异步加载」解决。

5.1 关键 CSS 内联（首屏样式直接写入 HTML）

将首屏核心 CSS 内联到 index.html，避免外部 CSS 阻塞渲染：

<!-- public/index.html -->
<head>
  <!-- 内联首屏核心样式 -->
  <style>
    #app { height: 100%; }
    .loading { display: flex; justify-content: center; align-items: center; height: 100%; }
  </style>
</head>

5.2 非关键脚本异步加载

在 main.js 中，将非核心初始化逻辑（如埋点、第三方统计）异步加载：

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

// 核心初始化逻辑
const app = createApp(App)
app.use(router)
app.mount('#app')

// 非核心逻辑：异步加载（使用 setTimeout 或 import()）
setTimeout(() => {
  import('./utils/analytics') // 埋点统计
  import('./utils/third-party') // 第三方 SDK
}, 1000)

总结

SPA 首屏加载优化是工程化 + 服务端 + 前端的协同工作，核心落地步骤如下：

体积优化：路由懒加载 + UI 按需加载 + 代码分割；
网络优化：Gzip 压缩 + CDN 加速 + 图片压缩；
渲染优化：关键 CSS 内联 + 非核心脚本异步；
缓存优化：文件哈希 + 浏览器缓存；

本文提供的方案完全可落地，从 Webpack 配置到 Nginx 再到前端代码，每一步都有具体可复制的代码，适配 Vue2/Vue3 生态，已在多个生产项目中验证，能彻底解决 SPA 首屏加载慢的问题。

阅读视图