如何解决Vite-React项目部署时浏览器缓存失效问题？

Question

问题： 我的 Vite-React 项目部署遇到了一个持续存在的问题。每当我部署新版本时，更改不会立即反映在生产 URL 上。相反，它们仅在执行硬重新加载后出现。这似乎是一个与缓存相关的问题。

详情： 我在生产环境中部署了一个Vite-React项目。但是，每当我推送更新并重新部署应用程序时，访问该站点的用户通常不会看到最新更改，直到他们执行硬重新加载（Ctrl + Shift + R 或 Cmd + Shift + R）。这表明存在缓存问题，导致无法立即获取和显示新版本。

采取的步骤： 我尝试了各种方法来解决这个问题，包括：

1. 在服务器配置中添加缓存控制标头。
2. 尝试通过更改 package.json 的版本数据来破坏缓存。

预期结果： 我希望每当我部署 Vite-React 项目的新版本时，用户应该立即可以看到更改，而不需要他们执行硬重新加载。部署过程应有效处理缓存失效，以确保无缝更新。

寻求解决方案： 我正在寻找有关如何在 Vite-React 项目部署中有效管理浏览器缓存失效的见解和建议。具体来说，我需要有关配置 Vite 或实施策略的指导，以确保自动获取并显示新版本，而不需要依赖用户执行手动清除缓存。

Answer 1

您可以使用 Service Worker 的缓存功能。基本流程将允许您跳转在新构建文件到达时触发的回调。在那里您可以选择强制刷新页面/提示用户刷新新版本/等等

import {Workbox} from 'workbox-window';

export default function registerSW() {
    //! running SW in dev mode can cause several problems due to
    //! caching on every update, so use this commented out code
    // if (process.env.NODE_ENV !== 'production') {
    //  return;
    // }

    if ('serviceWorker' in navigator) {
        const wb = new Workbox('sw.js');

        wb.addEventListener('installed', (e) => {
            if (e.isUpdate && confirm('New app update is available, click to update')) {
                window.location.reload();
            }
        });

        wb.register();
    }
}

import {clientsClaim} from 'workbox-core';
import {precacheAndRoute} from 'workbox-precaching';

clientsClaim();

self.skipWaiting();

precacheAndRoute(self.__WB_MANIFEST);

当然，将其注册到索引文件中。

请注意，这只是我 2 年前所做的一个示例，因此工作箱库上较新版本的流程可能会有所不同

Answer 2

使用了React Cache Buster，这解决了我的问题。