前端解决浏览器版本延迟问题(webpack)

浏览器延迟

修复bug发布测试环境时,测试同学发出疑问为什么bug没有修改,我们总是说让刷新一下就好了

  • 为什么要刷新

因为浏览器不知道代码有更新

  • 即使打包加了[contentHash]
  • Nginx设置index.html Cache-Control: no-store

总是无法做到浏览器同步更新

解决问题

  1. 打包注入唯一变量
js 复制代码
// webpack.config.js
const { DefinePlugin } = require('webpack');

module.exports = {
  plugins: [
    new DefinePlugin({
      __BUILD_VERSION__: JSON.stringify(Date.now()), // 或从 CI/CD 注入
    }),
  ],
};
  1. 生成version.json加入到build文件中
js 复制代码
// 保证注入变量及version.json写入值相同

const DEFAULT_BUILD_VERSION = JSON.stringify(Date.now())
module.exports = { plugins: 
[ new DefinePlugin({ __BUILD_VERSION__: DEFAULT_BUILD_VERSION, // 或从 CI/CD 注入 }),
 {
        apply(compiler) {
          // 使用 afterEmit 钩子,这个钩子会在资源输出到output目录后触发
          compiler.hooks.afterEmit.tap('VersionFilePlugin', () => {
            const outputPath = compiler.options.output.path;
            // 修复:生成正确的 JSON 格式
            const versionData = JSON.stringify({ version: DEFAULT_BUILD_VERSION });
            fs.writeFileSync(
              path.join(outputPath, 'version.json'),
              versionData
            );
          });
        }
      }
], };
    
  1. 编写检查版本的hooks
js 复制代码
import { useEffect } from 'react';
import { Modal } from 'antd';

// 加入生产环境才需要,本地开发不需要检查
const isProduction = process.env.NODE_ENV === 'production';

const useCheckVersion = () => {
  useEffect(() => {

    if (!isProduction) {
      return () => {};
    }

    const checkVersion = async () => {
      try {
          
        const res = await fetch(`/version.json?ts=${Date.now()}`, {
          cache: 'no-store', // 禁止缓存该请求
        });

        const { version } = await res.json();

        if (!version || !process.env.__BUILD_VERSION__ ||
          // 保证判断格式统一
          `${version}` !== `${process.env.__BUILD_VERSION__}`) 
          {
           Modal.info({
            title: '发现新版本',
            content: '请刷新页面以获取最新版本',
            onOk: () => {
              window.location.reload();
            },
            okText: '刷新',
          });
        }
      } catch (error) {
        // 添加更详细的错误信息
        if (error instanceof Error) {
          // eslint-disable-next-line no-console
          console.error('Error details:', {
            message: error.message,
            stack: error.stack,
          });
        }
      }
    };

    // 场景1:页面首次加载时检查(即使index.html被缓存也可以解决)
    checkVersion();

    // 场景2:页面从后台切回时检查
    const handleVisibilityChange = () => {
      if (document.visibilityState === 'visible') {
        checkVersion();
      }
    };

    document.addEventListener('visibilitychange', handleVisibilityChange);

    // 场景3(可选):定时轮询(每小时一次)
    const interval = setInterval(checkVersion, 3600000);

    return () => {
      document.removeEventListener('visibilitychange', handleVisibilityChange);
      clearInterval(interval);
    };
  }, []);
};

export default useCheckVersion;

这样在我们发布新版本时就可以解决大部分缓存问题,但是还是做不到实时更新,除非后端介入

相关推荐
余防几秒前
CSRF跨站请求伪造
前端·安全·web安全·csrf
兮山与5 分钟前
前端2.0
前端
南风木兮丶12 分钟前
Vue 项目安装 @antfu/eslint-config 保姆级教程
前端·javascript·vue.js
万少25 分钟前
记 HarmonyOS 开发中的一个小事件 怒提华为工单
前端·harmonyos
未来之窗软件服务27 分钟前
万象EXCEL开发(六)excel单元格运算逻辑 ——东方仙盟金丹期
前端·excel·仙盟创梦ide·东方仙盟·万象excel
Mintopia34 分钟前
🚀 Cesium-Kit:10 秒为你的 Cesium 项目添加动态光效标记
前端·javascript·cesium
Mintopia35 分钟前
🌩️ 云边协同架构下的 WebAI 动态资源调度技术
前端·javascript·aigc
Olrookie37 分钟前
若依前后端分离版学习笔记(十六)——scoped、路由跳转
前端·笔记
qaqxiaolei37 分钟前
高效办公利器:前端实现表格导出excel格式 + 自定义水印的完整方案
前端·javascript
叫我詹躲躲40 分钟前
为什么Bun.js能在3秒内启动一个完整的Web应用?
前端·javascript·bun