单页应用如何提高加载速度

问题

单页应用（SPA）首次加载时往往需要下载大量 JavaScript 和资源文件，如何优化加载速度？

解答

代码分割与懒加载

将应用代码拆分成多个小块，按需加载，避免一次性加载所有代码。

// React 示例
import { lazy, Suspense } from 'react';

const Dashboard = lazy(() => import('./Dashboard'));
const Profile = lazy(() => import('./Profile'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Routes>
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/profile" element={<Profile />} />
      </Routes>
    </Suspense>
  );
}

资源缓存

配置合理的缓存策略，让浏览器缓存静态资源。

// webpack 配置示例
module.exports = {
  output: {
    filename: '[name].[contenthash].js',
    clean: true
  }
};

# Nginx 缓存配置
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
  expires 1y;
  add_header Cache-Control "public, immutable";
}

预加载关键资源

使用 preload 和 prefetch 提前加载关键资源。

<!-- 预加载关键 CSS 和字体 -->
<link rel="preload" href="/main.css" as="style">
<link rel="preload" href="/font.woff2" as="font" crossorigin>

<!-- 预获取可能需要的资源 -->
<link rel="prefetch" href="/dashboard.js">

图片优化

选择合适的图片格式并压缩，使用现代格式如 WebP。

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="description">
</picture>

启用压缩

在服务器端启用 Gzip 或 Brotli 压缩。

// Express 示例
const compression = require('compression');
app.use(compression());

使用 CDN

将静态资源部署到 CDN，加速全球访问。

// webpack 配置
module.exports = {
  output: {
    publicPath: 'https://cdn.example.com/'
  }
};

优化 API 请求

减少请求数量，合并接口，使用缓存。

// 使用 SWR 缓存请求
import useSWR from 'swr';

function Profile() {
  const { data } = useSWR('/api/user', fetcher, {
    revalidateOnFocus: false,
    dedupingInterval: 60000
  });
  
  return <div>{data?.name}</div>;
}

服务器端渲染（SSR）

使用 SSR 生成首屏 HTML，减少客户端渲染时间。

// Next.js 示例
export async function getServerSideProps() {
  const data = await fetchData();
  return { props: { data } };
}

关键点

• 代码分割和路由懒加载可显著减少首次加载体积
• 合理配置缓存策略（contenthash + 长期缓存）提升二次访问速度
• 使用 preload 预加载关键资源，prefetch 预获取次要资源
• 图片使用 WebP 等现代格式，启用服务器压缩（Gzip/Brotli）
• CDN 加速静态资源分发，SSR 优化首屏渲染时间