Expo Web应用Chrome生产环境无法加载问题求助

1. 优先排查Chrome缓存/Service Worker冲突 #

无痕模式可正常加载，说明核心代码无问题，大概率是Chrome本地缓存或Service Worker（SW）残留导致：

• 禁用Expo自动生成的SW测试：在expo.config.js或app.json中添加配置：

  // expo.config.js
  export default {
    // ...其他配置
    web: {
      serviceWorker: false,
      // ...其他web配置
    }
  }
  

  重新打包部署后测试Chrome加载情况。
• 强制清除生产站点的Chrome缓存：打开Chrome DevTools → 应用（Application）→ 存储（Storage）→ 点击「清除站点数据」，包含缓存和SW。

2. 调整Traefik缓存策略 #

确保HTML文件不被Traefik或浏览器缓存，避免旧HTML引用过期资源：

• 在Traefik中间件中添加针对HTML的缓存控制规则：

  middlewares:
    no-cache-html:
      headers:
        customResponseHeaders:
          Cache-Control: "no-cache, no-store, must-revalidate"
          Pragma: "no-cache"
          Expires: "0"
  

  将该中间件绑定到你的应用路由，确保所有HTML请求返回上述头信息。

3. 优化Expo Web打包配置 #

• 若使用静态输出模式，确保资源路径为相对路径：

  web: {
    output: "static",
    publicPath: "./",
    bundler: "metro"
  }
  

• 检查layout_.tsx中的CSS/JS代码：确认是否使用了Chrome生产环境下未兼容的特性（如未加前缀的CSS属性、实验性API），本地开发可能有DevTools兼容补丁，但生产打包后失效。

4. 完善Express服务器缓存头配置 #

对HTML和静态资源设置差异化缓存策略：

const path = require('path');
const express = require('express');
const app = express();

// 对HTML文件禁用缓存
app.get('/*.html', (req, res) => {
  res.set({
    'Cache-Control': 'no-cache, no-store, must-revalidate',
    'Pragma': 'no-cache',
    'Expires': '0'
  });
  res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});

// 静态资源（带哈希文件名）设置长缓存
app.use(express.static('dist', {
  maxAge: '365d',
  etag: true,
  lastModified: false
}));

app.listen(process.env.PORT || 3000);

5. 排除Chrome扩展干扰 #

让用户禁用所有Chrome扩展后重新加载页面，排除扩展拦截页面渲染、修改请求头的可能。

内容的提问来源于stack exchange，提问作者Viktor Pesic