import React, { Suspense } from "react";
import { createBrowserRouter } from "react-router-dom";

const Home = React.lazy(() => import("./pages/Home"));
const About = React.lazy(() => import("./pages/About"));
const Dashboard = React.lazy(() => import("./pages/Dashboard"));

export const router = createBrowserRouter([
  {
    path: "/",
    element: (
      页面加载中...

这样用户访问首页时，不会一次性加载后台页面、关于页面等无关代码。

2. Vite 配置优化

如果你使用 Vite，可以通过拆包、压缩、分析包体积等方式提高构建性能和加载速度。

vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import compression from "vite-plugin-compression";
import { visualizer } from "rollup-plugin-visualizer";

export default defineConfig({
  plugins: [
    react(),

    // 生成 gzip 文件
    compression({
      algorithm: "gzip",
      ext: ".gz",
      threshold: 10240,
      deleteOriginFile: false,
    }),

    // 生成 brotli 文件
    compression({
      algorithm: "brotliCompress",
      ext: ".br",
      threshold: 10240,
      deleteOriginFile: false,
    }),

    // 打包分析
    visualizer({
      filename: "dist/stats.html",
      open: false,
      gzipSize: true,
      brotliSize: true,
    }),
  ],

  build: {
    target: "es2018",
    minify: "terser",
    sourcemap: false,

    rollupOptions: {
      output: {
        manualChunks: {
          react: ["react", "react-dom", "react-router-dom"],
          vendor: ["axios", "lodash-es"],
        },
      },
    },

    chunkSizeWarningLimit: 800,
  },

  server: {
    host: "0.0.0.0",
    port: 5173,
  },
});

这里重点做了几件事：

• 开启 gzip 和 brotli 静态压缩文件生成；
• 使用 manualChunks 拆分 React、第三方依赖；
• 关闭生产环境 sourcemap，减少静态资源暴露；
• 通过 rollup-plugin-visualizer 分析包体积。

如果你发现某个依赖特别大，比如 moment、echarts、monaco-editor，可以考虑按需加载、替换轻量库，或者只在特定页面动态导入。

3. Webpack 配置优化

如果项目仍在使用 Webpack，可以配置代码分割和缓存。

webpack.config.js

const path = require("path");
const CompressionPlugin = require("compression-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
  mode: "production",

  entry: {
    main: "./src/index.js",
  },

  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "js/[name].[contenthash:8].js",
    chunkFilename: "js/[name].[contenthash:8].chunk.js",
    clean: true,
    publicPath: "/",
  },

  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        parallel: true,
        terserOptions: {
          compress: {
            drop_console: true,
            drop_debugger: true,
          },
        },
      }),
    ],

    splitChunks: {
      chunks: "all",
      cacheGroups: {
        reactVendor: {
          test: /[\\/]node_modules[\\/](react|react-dom|react-router-dom)[\\/]/,
          name: "react-vendor",
          priority: 20,
        },
        commonVendor: {
          test: /[\\/]node_modules[\\/]/,
          name: "vendor",
          priority: 10,
        },
      },
    },

    runtimeChunk: "single",
  },

  plugins: [
    new CompressionPlugin({
      algorithm: "gzip",
      test: /\.(js|css|html|svg)$/,
      threshold: 10240,
      minRatio: 0.8,
    }),
  ],
};

Webpack 项目建议重点关注：

• 是否开启 splitChunks；
• 是否使用 contenthash 做长期缓存；
• 是否压缩 JS 和 CSS；
• 是否错误地把大型库打进首屏主包；
• 是否保留了大量 console 和调试代码。

四、图片优化：很多网站慢在图片

图片通常是网页中最大的资源类型。AI 生成页面时经常会使用大图背景、卡片图、头像、Banner 图，如果不优化，首屏速度会明显变慢。

1. 图片格式建议

2. 图片懒加载

注意：首屏关键大图不建议懒加载，否则可能影响 LCP。首屏主视觉图应该优先加载，并设置明确的宽高，避免 CLS 布局偏移。

3. 响应式图片

这里使用了 AVIF、WebP、JPG 的降级方案，现代浏览器会优先加载更小的格式。

五、Nginx 配置：开启缓存、压缩和静态资源优化

Nginx 是提升网站速度的重要一环。合理的 Nginx 配置可以让静态资源缓存更久、传输更小、接口代理更稳定。

nginx.conf

user nginx;
worker_processes auto;

events {
    worker_connections 10240;
    use epoll;
    multi_accept on;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile on;
    tcp_nopush on;
    tcp_nodelay on;

    keepalive_timeout 65;
    keepalive_requests 1000;

    server_tokens off;

    # gzip 压缩
    gzip on;
    gzip_comp_level 6;
    gzip_min_length 1024;
    gzip_vary on;
    gzip_proxied any;
    gzip_types
        text/plain
        text/css
        text/javascript
        application/javascript
        application/json
        application/xml
        image/svg+xml;

    # brotli 如果 Nginx 已安装 brotli 模块，可开启
    # brotli on;
    # brotli_comp_level 5;
    # brotli_types text/plain text/css application/javascript application/json image/svg+xml;

    # 文件缓存
    open_file_cache max=10000 inactive=60s;
    open_file_cache_valid 120s;
    open_file_cache_min_uses 2;
    open_file_cache_errors on;

    server {
        listen 80;
        server_name example.com www.example.com;

        root /usr/share/nginx/html;
        index index.html;

        # SPA 前端路由
        location / {
            try_files $uri $uri/ /index.html;
        }

        # HTML 不建议强缓存，方便发版后及时更新
        location ~* \.html$ {
            add_header Cache-Control "no-cache, no-store, must-revalidate";
        }

        # 静态资源长期缓存，前提是文件名带 hash
        location ~* \.(js|css|png|jpg|jpeg|gif|webp|avif|svg|ico|woff2?)$ {
            expires 365d;
            add_header Cache-Control "public, max-age=31536000, immutable";
            access_log off;
            try_files $uri =404;
        }

        # API 代理
        location /api/ {
            proxy_pass http://backend:3000/;
            proxy_http_version 1.1;

            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;

            proxy_connect_timeout 5s;
            proxy_send_timeout 30s;
            proxy_read_timeout 30s;
        }
    }
}

这个配置的关键点：

• HTML 不强缓存，避免部署后用户一直访问旧页面；
• JS、CSS、图片等带 hash 的资源设置长期缓存；
• 开启 gzip 压缩，减少传输体积；
• 使用 try_files 支持前端 SPA 路由；
• 关闭 server_tokens，减少版本暴露。

六、CDN 配置：让用户就近访问资源

如果网站用户分布在多个地区，CDN 是非常有效的提速方案。CDN 可以把静态资源缓存到离用户更近的节点，减少网络延迟。

建议 CDN 缓存策略如下：

CDN 侧建议开启：

• HTTPS / HTTP2 / HTTP3；
• Brotli 压缩；
• 图片自动 WebP；
• 边缘缓存；
• 防盗链；
• 访问日志分析；
• 缓存预热和刷新。

七、后端接口优化：不要让 API 拖慢页面

前端加载再快，如果接口响应慢，页面依然会慢。AI 生成后端接口时，常见问题包括：

• 数据库查询没有索引；
• 一次接口返回过多字段；
• 多个接口串行调用；
• 没有分页；
• 重复查询同一份数据；
• 缺少缓存；
• 日志写入阻塞主流程。

1. Node.js 接口缓存示例

import express from "express";
import NodeCache from "node-cache";

const app = express();

const cache = new NodeCache({
  stdTTL: 60,
  checkperiod: 120,
});

app.get("/api/articles", async (req, res) => {
  const cacheKey = "articles:list";

  const cached = cache.get(cacheKey);
  if (cached) {
    return res.json({
      source: "cache",
      data: cached,
    });
  }

  const data = await getArticlesFromDatabase();

  cache.set(cacheKey, data);

  res.json({
    source: "database",
    data,
  });
});

async function getArticlesFromDatabase() {
  return [
    { id: 1, title: "AI 编程实践" },
    { id: 2, title: "网站性能优化" },
  ];
}

app.listen(3000, () => {
  console.log("Server running on port 3000");
});

对于高并发项目，可以使用 Redis 作为缓存层。

2. Redis 缓存配置示例

.env

REDIS_HOST=127.0.0.1
REDIS_PORT=6379
REDIS_PASSWORD=
CACHE_TTL=300

cache.ts

import Redis from "ioredis";

export const redis = new Redis({
  host: process.env.REDIS_HOST,
  port: Number(process.env.REDIS_PORT || 6379),
  password: process.env.REDIS_PASSWORD || undefined,
  maxRetriesPerRequest: 3,
});

export async function getCache(key: string): Promise {
  const value = await redis.get(key);
  if (!value) return null;
  return JSON.parse(value) as T;
}

export async function setCache(key: string, value: T, ttl = 300) {
  await redis.set(key, JSON.stringify(value), "EX", ttl);
}

使用方式

app.get("/api/home", async (req, res) => {
  const cacheKey = "page:home";

  const cached = await getCache(cacheKey);
  if (cached) {
    return res.json(cached);
  }

  const data = await queryHomePageData();

  await setCache(cacheKey, data, 300);

  res.json(data);
});

接口缓存尤其适合以下数据：

• 首页推荐内容；
• 分类列表；
• 热门文章；
• 商品详情；
• 站点配置；
• 用户不敏感的公共数据。

八、数据库优化：AI 生成 SQL 也要检查索引

很多性能问题最终都落在数据库上。AI 可以帮你生成 SQL，但生成之后必须检查执行计划。

例如文章表：

CREATE TABLE articles (
  id BIGINT PRIMARY KEY AUTO_INCREMENT,
  title VARCHAR(255) NOT NULL,
  category_id BIGINT NOT NULL,
  status TINYINT NOT NULL DEFAULT 1,
  published_at DATETIME NOT NULL,
  created_at DATETIME NOT NULL,
  updated_at DATETIME NOT NULL
);

如果经常查询某个分类下已发布文章，并按发布时间排序：

SELECT id, title, published_at
FROM articles
WHERE category_id = 10
  AND status = 1
ORDER BY published_at DESC
LIMIT 20;

可以添加联合索引：

CREATE INDEX idx_category_status_published
ON articles (category_id, status, published_at);

优化建议：

1. 不要 SELECT *，只查需要字段；
2. 列表接口必须分页；
3. 高频查询字段建立索引；
4. 避免深分页，可以使用游标分页；
5. 大字段如正文、JSON、图片信息尽量拆表；
6. 使用 EXPLAIN 查看 SQL 执行计划；
7. 写接口和读接口可以分离；
8. 高频公共数据放入缓存。

九、Next.js 项目速度优化配置

如果使用 Next.js，可以利用 SSR、SSG、ISR、图片优化和动态导入来提升性能。

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,

  compress: true,

  poweredByHeader: false,

  images: {
    formats: ["image/avif", "image/webp"],
    deviceSizes: [640, 750, 828, 1080, 1200, 1920],
    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
    minimumCacheTTL: 60 * 60 * 24 * 30,
    remotePatterns: [
      {
        protocol: "https",
        hostname: "cdn.example.com",
      },
    ],
  },

  experimental: {
    optimizeCss: true,
  },

  async headers() {
    return [
      {
        source: "/_next/static/:path*",
        headers: [
          {
            key: "Cache-Control",
            value: "public, max-age=31536000, immutable",
          },
        ],
      },
      {
        source: "/images/:path*",
        headers: [
          {
            key: "Cache-Control",
            value: "public, max-age=2592000",
          },
        ],
      },
    ];
  },
};

module.exports = nextConfig;

Next.js 中还可以使用动态导入：

import dynamic from "next/dynamic";

const Chart = dynamic(() => import("@/components/Chart"), {
  ssr: false,
  loading: () => 
图表加载中...
,
});

export default function DashboardPage() {
  return ;
}

图表、富文本编辑器、地图、视频播放器等组件通常不适合进入首屏主包，动态导入能显著减少初始加载压力。

十、前端请求优化：减少重复请求和串行等待

AI 生成的页面经常会在多个组件中分别请求接口，导致同一个接口被调用多次。建议统一数据请求层，使用缓存和请求去重。

Axios 基础配置

request.ts

import axios from "axios";

export const request = axios.create({
  baseURL: "/api",
  timeout: 10000,
});

request.interceptors.response.use(
  response => response.data,
  error => {
    console.error("API Error:", error);
    return Promise.reject(error);
  }
);

简单请求去重

const pending = new Map>();

export function fetchWithDedupe(key: string, fn: () => Promise): Promise {
  if (pending.has(key)) {
    return pending.get(key) as Promise;
  }

  const promise = fn().finally(() => {
    pending.delete(key);
  });

  pending.set(key, promise);
  return promise;
}

使用：

fetchWithDedupe("home-data", () => request.get("/home"));

如果是 React 项目，也可以使用 TanStack Query：

import { useQuery } from "@tanstack/react-query";

function Home() {
  const { data, isLoading } = useQuery({
    queryKey: ["home"],
    queryFn: () => request.get("/home"),
    staleTime: 1000 * 60,
  });

  if (isLoading) return 
加载中...
;

  return 
{data.title}
;
}

它可以自动处理缓存、重试、请求合并、后台刷新等问题。

十一、CSS 与字体优化

CSS 和字体也会影响首屏速度，尤其是中文字体文件体积很大。

优化建议：

1. 删除未使用 CSS；
2. 首屏关键 CSS 内联；
3. 避免全量引入 UI 框架样式；
4. 字体使用 font-display: swap；
5. 中文字体尽量使用系统字体；
6. 图标优先使用 SVG，而不是整套 icon font。

字体配置示例

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter.woff2") format("woff2");
  font-display: swap;
}

body {
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "PingFang SC",
    "Microsoft YaHei",
    sans-serif;
}

font-display: swap 可以让浏览器先使用系统字体显示文字，等自定义字体加载完成后再替换，避免文字长时间不可见。

十二、Docker 部署优化配置

如果使用 Docker 部署前端静态站点，可以通过多阶段构建减少镜像体积。

Dockerfile

FROM node:20-alpine AS builder

WORKDIR /app

COPY package*.json ./

RUN npm ci

COPY . .

RUN npm run build


FROM nginx:1.25-alpine

COPY nginx.conf /etc/nginx/nginx.conf

COPY --from=builder /app/dist /usr/share/nginx/html

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

配合上文的 Nginx 配置，可以实现较高性能的静态资源服务。

十三、让 AI 帮你做性能优化的提示词模板

AI 编程的优势不是只写功能，而是可以帮助你持续审查和改进代码。下面是一些实用提示词。

1. 前端性能审查提示词

请你作为资深前端性能优化专家，审查以下 React/Vue 代码。
重点检查：
1. 是否存在不必要的重复渲染；
2. 是否可以做组件懒加载；
3. 是否存在过大的依赖；
4. 是否有重复接口请求；
5. 图片是否需要懒加载或预加载；
6. 是否会影响 LCP、CLS、INP。
请给出具体问题、原因和修改后的代码。

2. 后端接口优化提示词

请你作为后端性能优化专家，分析以下接口代码。
重点检查：
1. 数据库查询是否高效；
2. 是否缺少索引；
3. 是否存在 N+1 查询；
4. 是否需要缓存；
5. 是否返回了过多字段；
6. 高并发下是否有风险。
请给出优化建议和重构后的代码。

3. 构建产物分析提示词

这是我的前端打包分析结果：
React 主包大小：xxx KB
vendor 包大小：xxx KB
某依赖大小：xxx KB
Lighthouse 指标如下：xxx

请分析哪些资源影响首屏加载，并给出 Vite/Webpack 配置优化方案。

4. Nginx 配置优化提示词

请你检查以下 Nginx 配置是否适合前端静态站点部署。
要求：
1. HTML 不强缓存；
2. JS/CSS/图片长期缓存；
3. 开启 gzip 或 brotli；
4. 支持 SPA 路由；
5. 增加基础安全响应头；
6. 不影响 API 代理。
请输出优化后的完整配置。

十四、常见错误：这些做法会让网站越来越慢

1. 所有页面一次性打包
   后台管理、图表、编辑器都进入首页主包，首屏必然变慢。

2. 图片直接上传原图
   手机拍摄的一张图片可能 3MB～10MB，如果直接用于网页，会严重影响加载。

3. 盲目使用大型 UI 库
   如果没有按需引入，可能引入大量无用 CSS 和组件代码。

4. 接口没有分页
   一次返回几千条数据，不仅后端慢，前端渲染也慢。

5. 缓存策略错误
   HTML 强缓存导致用户更新不了页面；静态资源不缓存导致每次都重新下载。

6. 过多第三方脚本
   各类统计、广告、客服插件叠加，会占用主线程，拖慢交互响应。

7. AI 生成代码不审查
   AI 生成的代码可能功能正确，但性能不一定合理。必须通过工具检测、人工复核和线上监控来验证。

十五、网站速度优化上线检查清单

上线前可以按以下清单检查：

• [ ] Lighthouse 移动端评分是否达标；
• [ ] LCP 是否小于 2.5 秒；
• [ ] 页面是否存在明显 CLS；
• [ ] 首屏 JS 是否过大；
• [ ] 是否开启代码分割；
• [ ] 是否开启 gzip/brotli；
• [ ] 图片是否压缩为 WebP/AVIF；
• [ ] 首屏大图是否设置 fetchpriority="high"；
• [ ] 非首屏图片是否懒加载；
• [ ] 字体是否设置 font-display: swap；
• [ ] HTML 是否不强缓存；
• [ ] 静态资源是否长期缓存；
• [ ] API 是否有超时和错误处理；
• [ ] 高频接口是否使用缓存；
• [ ] 数据库慢查询是否已分析；
• [ ] CDN 是否配置正确；
• [ ] 是否接入前端性能监控。

结语

AI 编程可以让网站开发速度更快，但网站“运行速度”仍然依赖开发者的性能意识和工程配置。真正高质量的网站，不只是功能完整、页面美观，还应该具备快速加载、稳定交互、低资源消耗和良好可维护性。

提高网站速度并不是单点优化，而是一个系统工程：前端要减少首屏资源、按需加载、优化图片和字体；后端要减少慢查询、增加缓存、控制接口体积；部署层要配置 Nginx、CDN、压缩和缓存；上线后还要持续监控真实用户体验。

在 AI 编程时代，更好的做法是把性能要求前置到提示词、代码审查和配置生成中。让 AI 不仅帮你“写得快”，还要帮你“跑得快”。只要建立正确的优化流程，并配合本文中的配置文件和检查清单，就能显著提升网站访问速度，降低服务器压力，为用户提供更流畅的访问体验。