项目整体需求大致完成后，需要开始进行项目性能优化了，优化思路主要有：首屏加载、交互优化等

图片加载白屏

首屏如果有很多图片需要加载，那么大概率会出现白屏的情况，下面从打包->加载资源->加速网络传输进行解决，主要分为：

减少资源体积

webpack和vite都有对应的插件可以使用

  • vite — vite-plugin-imagemin
    • 首先要明白，在打包时，**vite**会对**src**或项目根目录下的图片进行压缩或其他处理，但对于**public**下的图片，vite会绕过插件的处理，只对其进行复制处理；也就是说如果直接在项目中使用public中的图片，同时文件又特别大的情况下，那么出现白屏是必然的；
    • 常见配置：
// vite.config.js
import { defineConfig } from 'vite';
import imagemin from 'vite-plugin-imagemin';

export default defineConfig({
  plugins: [
    imagemin({
      gifsicle: { optimizationLevel: 3 }, // GIF 压缩
      mozjpeg: { quality: 75 }, // JPEG 有损压缩（质量 75%）
      pngquant: { quality: [0.8, 0.9] }, // PNG 有损压缩（质量区间）
      svgo: { plugins: [{ removeViewBox: false }] }, // SVG 优化（保留 viewBox）
      webp: { quality: 80 }, // 转换为 WebP（可选）
    }),
  ],
});
  • webpack — <font style="color:rgba(0, 0, 0, 0.9);">image-webpack-loader</font>
    • npm i image-webpack-loader –sace-dev
// webpack.config.ts
module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|webp|avif|svg)$/i,
        type: 'asset', // 自动处理为资源文件
        parser: {
          dataUrlCondition: {
            maxSize: 8 * 1024, // 超过 8KB 转为外部文件，否则 Base64 内联
          },
        },
        generator: {
          filename: 'images/[name]-[hash][ext]', // 输出路径和文件名
        },
      },
      {
        test: /\.(png|jpe?g|gif|webp|avif|svg)$/i,
        use: [
          {
            loader: 'file-loader', // 或直接用 Asset Modules
            options: { name: 'images/[name]-[hash].[ext]' },
          },
          {
            loader: 'image-webpack-loader',
            options: {
              mozjpeg: { progressive: true, quality: 75 }, // JPEG 渐进式加载+压缩
              optipng: { enabled: false }, // 关闭 optipng（用 pngquant 替代）
              pngquant: { quality: [0.8, 0.9], speed: 4 }, // PNG 压缩
              gifsicle: { interlaced: false }, // GIF 不交错
              webp: { quality: 80 }, // 转换为 WebP（需配合其他工具）
            },
          },
        ],
        type: 'javascript/auto', // 避免与 Asset Modules 冲突（若使用 file-loader）
      },
    ],
  },
};

加载资源

懒加载非关键图片

懒加载并不能提高首屏速度，只能优化用户体验；

  • 图片
    • 替代文本
    • 结合intersectionObserver监听滚动事件
    • 也可以使用第三方库lozad.js（轻量级，支持图片/iframe）

关键图片预加载

<link rel="preload" href="image.webp" as="image">

网络

即使做了前面的处理，也有可能还是出现首屏加载慢的情况，所以还可以对静态资源进行托管或缓存处理。

这部分一般都是部署的时候进行；

CDN加速

将静态资源托管到服务器（例：jsDeliver，阿里云OSS）

缓存策略

设置HTTP缓存头，再次访问时直接读取本地资源，无需再次下载。

  • Cache-Control: max-age=31536000, immutable：图片缓存 1 年（immutable 表示内容不变，避免重复验证）；
  • ETag/Last-Modified：资源更新时，浏览器自动重新请求。