如何修复React JS中‘A long cache lifetime...’的缓存优化提示？

针对Create React App（CRA）项目 #

CRA项目可通过两种方式调整静态资源缓存策略：

• 服务器端配置（最直接有效）：在部署服务器（Nginx、Apache等）中，为图片、字体类静态资源设置长缓存头。以Nginx为例，添加如下配置：

  location ~* \.(jpg|jpeg|png|gif|svg|woff|woff2|ttf|eot)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
  }
  

  expires 1y将缓存周期设为1年，immutable告知浏览器资源不会变更，无需重复发送验证请求。
• 修改Webpack缓存配置：借助react-app-rewired和customize-cra覆盖默认配置。先安装依赖，再在项目根目录创建config-overrides.js：

  const { override, adjustWorkbox } = require('customize-cra');
  
  module.exports = override(
    adjustWorkbox(wb => {
      wb.runtimeCaching.push({
        urlPattern: /\.(jpg|jpeg|png|gif|svg|woff|woff2|ttf|eot)$/,
        handler: 'CacheFirst',
        options: {
          cacheName: 'static-assets-cache',
          expiration: {
            maxAgeSeconds: 31536000, // 1年
          },
          cacheableResponse: {
            statuses: [0, 200],
          },
        },
      });
      return wb;
    })
  );
  

  最后修改package.json的scripts，将build命令改为react-app-rewired build。

针对自定义Webpack配置的项目 #

直接调整Webpack输出规则，配合服务器缓存策略：

• 添加资源哈希后缀：确保资源更新时浏览器能获取新版本，Webpack配置示例：

  module.exports = {
    output: {
      filename: '[name].[contenthash].js',
      assetModuleFilename: '[name].[contenthash][ext][query]',
    },
    optimization: {
      moduleIds: 'deterministic',
      runtimeChunk: 'single',
      splitChunks: {
        cacheGroups: {
          vendor: {
            test: /[\\/]node_modules[\\/]/,
            name: 'vendors',
            chunks: 'all',
          },
        },
      },
    },
  };
  

  带哈希的文件名配合服务器长缓存，既能利用缓存加速，又能在资源更新时让浏览器自动拉取新文件。
• 服务器端缓存配置：同CRA项目的服务器配置逻辑，为静态资源设置长缓存头。

核心注意事项 #

• 必须为静态资源添加内容哈希后缀，否则长缓存会导致用户无法获取更新后的资源。
• 仅在生产环境配置长缓存，本地开发环境无需设置，避免调试时出现缓存干扰。
• immutable缓存头可进一步减少浏览器的验证请求，提升重复访问的性能。

内容的提问来源于stack exchange，提问作者Ganda Rain Panjaitan