英文:
Force browser to clean cache in react
问题
尝试使用缓存破坏技术来清除每个发布的缓存。使用 new Date().getTime() 或 Hash() 方法来创建一个唯一的版本值，并在文件路径后附加该版本值。
这应该将版本号应用于构建目录中的 main.js 文件，这样我就不必为所有的 js 和 CSS 文件添加版本号。
<link style="stylesheet" href={'main.css?v=${value}'}/>
<script src={'main.js?v=${value}'} />
英文:
Trying to use Cache Busting Technique to clear the cache for each release. Used new Date().getTime() or Hash() method to create a unique version value and append the version value after the file path.
This should apply the version number to the main.js file from the build directory, so I don't have to add the version number to all js and CSS files.
1.
<link style="stylesheet" href={'main.css?v=${value}'}/>
2.
<script src={'main.js?v=${value}'} />
答案1
得分: 0
在 React 中，你可以使用第三方库，如 react-cache-buster 来进行缓存破坏（Cache Busting）。
该库允许客户端在生产环境中发布新版本时自动检查新版本，并在发布新版本时清除缓存并重新加载页面。
例如：
import React from 'react';
import CacheBuster from 'react-cache-buster';
import { version } from '../package.json';
import Loading from './loading';
const App = () => {
const isProduction = process.env.NODE_ENV === 'production';
return (
<CacheBuster
currentVersion={version}
isEnabled={isProduction} // 如果为 false，则禁用该库。
isVerboseMode={false} // 如果为 true，则该库将在控制台中写入详细日志。
loadingComponent={<Loading />} // 如果不传递，则在检查新版本时不会显示任何内容。
metaFileDirectory='.' // 如果公共资源托管在服务器根目录之外的其他位置。
>
// 你的实际根组件...
</CacheBuster>
);
};
export default App;
了解更多，请参阅 https://www.npmjs.com/package/react-cache-buster。
英文:
In react, you can use third-party library such as react-cache-buster for Cache Busting.
This library allows clients to automatically check the new version when a new version is released in the production environment, and if a new version is published, clearing the cache and reload the page.
For example:
import React from 'react';
import CacheBuster from 'react-cache-buster';
import { version } from '../package.json';
import Loading from './loading';
const App = () => {
const isProduction = process.env.NODE_ENV === 'production';
return (
<CacheBuster
currentVersion={version}
isEnabled={isProduction} //If false, the library is disabled.
isVerboseMode={false} //If true, the library writes verbose logs to console.
loadingComponent={<Loading />} //If not pass, nothing appears at the time of new version check.
metaFileDirectory={'.'} //If public assets are hosted somewhere other than root on your server.
>
// Your actual root component...
</CacheBuster>
);
};
export default App;
To learn more, see https://www.npmjs.com/package/react-cache-buster
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论