在构建的 SPA 中禁用缓存答案

【问题标题】：Disabling caching in a built SPA在构建的 SPA 中禁用缓存
【发布时间】：2018-09-03 07:00:47
【问题描述】：

它是如何工作的：我构建了应用程序，然后使用 FTP 将它放到网上。问题是，浏览器缓存了我的 React 应用程序的旧版本。

要使用新版本，我必须手动清除缓存。显然，用户不会知道该怎么做。

如何禁用对代码的缓存？

我正在使用linuxpl.com 托管。我完全不知道我应该包括什么，如果您需要一些信息，请告诉我，我会提供。

【问题讨论】：

【解决方案1】：

要强制浏览器“清除”其缓存，您可以在每次创建构建时生成唯一的文件名。

如果您使用webpack 创建生产版本 - 您可以阅读更多如何处理它here。

【讨论】：

我只是用yarn build 改成webpack有意义吗？
@AlexIronside yarn build 只是执行一些任务（在package.json 中定义）。任务到底做什么 - 取决于您的配置。您是否使用诸如create-react-app 之类的样板项目创建了您的SPA？
是的。我正在使用create-react-app
@AlexIronside 那么您应该已经正确配置了webpack，以便在每次运行yarn build 时为您的资产生成不同的文件名。
我刚刚尝试构建了 2 次，两次的名称都是 main.38f79161.js

【解决方案2】：

您的服务器可以告诉浏览器不要缓存项目。在 NGINX（或您的服务器正在运行的任何东西）中，您需要沿以下行添加标头

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

让浏览器知道总是获取新版本。

【讨论】：