发版 访问旧文件 方案

问题场景

当umi项目发新版后，如果客户使用了浏览器恢复上次打开页面，会出现访问旧css文件的现象，导致页面一直处于loading。

初步怀疑

怀疑是缓存问题 导致访问的 旧js、css 文件

解决方案

nginx 设置

add_header Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0";
add_header Pragma "no-cache";
add_header Expires "0";

• 无效

html不采用缓存

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">

• 无效

nginx 监听css文件获取404 问题

css 404 时 返回 js 代码刷新 页面

• 网页直接访问 css 可以
• html link css 404 无效

监听请求代理

fetch 请求代理css

• 无法代理资源消耗

捕获link 加载状态

• 只能成功 无法捕获失败

捕获root 节点样式树

  function isStyleApplied(element, property, expectedValue) {
    const computedStyle = window.getComputedStyle(element);
    return computedStyle.getPropertyValue(property) === expectedValue;
  }

  window.addEventListener("load", () => {
    const testElement = document.getElementById('root');
    const isColorApplied = isStyleApplied(testElement, 'font-variant', 'tabular-nums');
    if (isColorApplied) {
      // sessionStorage.setItem('cssLoaded', false);
      console.log('Color is applied to the element.');
    } else {
      //  css 加载失败
      window.location.reload();
      console.log('Color is not applied to the element.');
    }
  });

捕获root 节点 判断 css 属性 控制是否刷新

测试 可行

• 风险点 css 样式是定死的一个判断