单页面应用（SPA）首屏加载优化方案
首屏加载优化是单页面应用（SPA，如 Vue/React）的核心性能指标，用户进入的第一个页面大多是是首页，这也是用户体验的重要指标。
那么一般是哪些方面入手呢？主要从资源优化（资源体积控制）、服务器优化（网络传输优化）、加载优化（代码执行效率）、渲染优化（渲染管线优化）、浏览器优化（浏览器机制利用）这几个方面/维度入手，以下我列了几个点简单描述下，详细具体可以各自上网查资料或问AI。
1. 代码分割（Code Splitting）
原理
现代前端框架（如 Vue、React）通常使用 Webpack 进行打包。默认情况下，所有代码会被打包成一个大的 JavaScript 文件，导致首屏加载缓慢。代码分割可以将不同模块拆分成独立的文件，按需加载，减少首屏 JavaScript 体积，且组件使用引入有先后顺序。
优化方案
- 按需加载组件：使用 Webpack
import()进行动态导入。 - Vue Router 懒加载：对于路由组件，采用懒加载方式。
示例（Vue Router 懒加载）：
const Home = () => import('@/views/Home.vue');
const About = () => import('@/views/About.vue');const routes = [{ path: '/', component: Home },{ path: '/about', component: About }
];
2. 预加载与预请求（Preload & Prefetch）
原理
preload：优先加载当前页面可能用到的资源。prefetch：低优先级加载未来可能访问的资源。
优化方案
在 Vue Router 中，可以通过 webpackPrefetch 和 webpackPreload 进行优化。
示例：
const Home = () => import(/* webpackPrefetch: true */ '@/views/Home.vue');
const About = () => import(/* webpackPreload: true */ '@/views/About.vue');
3. 服务器端渲染（SSR）与静态站点生成（SSG）
原理
- SSR（Server-Side Rendering）：服务器预渲染 HTML，提高首屏速度。
- SSG（Static Site Generation）：预生成 HTML，提高静态资源访问速度。
优化方案
- 使用 Nuxt.js 实现 Vue SSR 或 SSG。
- 使用
generate生成静态 HTML。
4. 使用 HTTP/2 或 HTTP/3
原理
- HTTP/2 支持多路复用，减少请求阻塞，提高并发加载能力。
- HTTP/3 进一步优化了丢包恢复，提高性能。
优化方案
- 确保服务器支持 HTTP/2（Nginx 配置
http2 on;）。 - 采用
link rel="preload"预加载关键资源。
5. 启用 Gzip 或 Brotli 压缩
原理
Gzip 和 Brotli 可以有效减少 HTML、CSS、JS 体积，提高加载速度。
优化方案
- 在 Nginx 或 Apache 服务器中启用 Gzip/Brotli。
- 在 Webpack 配置
compression-webpack-plugin进行构建时压缩。
6. 减少 JS 体积/图片体积
优化方案
- 使用
webpack-bundle-analyzer检查包大小。 - 按需引入第三方库（如
lodash-es代替lodash）。 - 替换更小的库，如
dayjs代替moment.js。 - 图片减肥：PNG 转
WebP、大图用CDN 缩略图（原图 2MB → 压缩后 200KB）
7. 使用 CDN 加速
优化方案
- 将 Vue、Axios、Vuex 等核心库使用 CDN 加载。
- 示例：
<script src="https://cdn.jsdelivr.net/npm/vue@3.0.0/dist/vue.global.prod.js"></script>
8. Skeleton（骨架屏）
原理
在页面加载时，使用骨架屏占位，提升用户体验。
优化方案
- Vue 组件中使用
v-if或v-show控制骨架屏。 - 示例：
<template><div v-if="loading" class="skeleton"></div><div v-else class="content">内容加载完成</div>
</template>
9. 延迟加载非关键资源（Lazy Load）
优化方案
- 只加载首屏必要内容，其他内容延迟加载。
- Vue 中使用
v-lazy进行图片懒加载。
10. Service Worker（PWA 支持）
原理
Service Worker 允许 SPA 缓存资源，实现离线访问。
优化方案
- 使用 Workbox 进行 Service Worker 注册。
- 示例：
if ('serviceWorker' in navigator) {navigator.serviceWorker.register('/sw.js');
}
11. 本地存储缓存
优化方案
- 使用
localStorage、sessionStorage或IndexedDB作为数据缓存。 - 示例：
localStorage.setItem('userData', JSON.stringify(user));
const data = JSON.parse(localStorage.getItem('userData'));
总结
- 第一次访问：拆包裹、用压缩、提前搬
- 重复访问：靠缓存、走高速
- 让用户感觉快：先给看毛坯房（骨架屏），后台偷偷装修（加载资源）
通过以上优化方案，可以有效减少 SPA 首屏加载时间，提升用户体验。
