需要避免每次构建浏览器刷新的情况

Question

在我们的项目中，我们遵循频繁的部署过程。随着每次部署，我们的客户端必须刷新浏览器以反映由于浏览器缓存而导致的更改。我想知道我们如何避免这种情况。即，当我们部署它时，应该直接反映在所有用户浏览器中，而不需要刷新。请帮我解决这个问题。

Answer 1

技术上你不能刷新浏览器缓存，因为你没有直接访问那里。你可以做的是缓存清除。每次部署到服务器时都会更改您的js和css文件名。

例如

app_v1.js app_v2.js ...

和

app_v1.css app_v2.css ...

在这种方式每次你部署浏览器将被迫获得新的js和css文件。

更多信息，检查此链接

https://css-tricks.com/strategies-for-cache-busting-css/

Answer 2

有一个叫热模块的更换方案。这无缝地取代你的webpack包（假设你已经在使用它）。

查看What exactly is Hot Module Replacement in Webpack?的一些参考。 HMR设置相当复杂，每个框架都不相同。

webpack-dev-server也依赖于webpack，但它更简单：它自动为您推送刷新按钮。

Answer 3

考虑更新响应头中的高速缓存指令以减少或删除浏览器高速缓存允许的高速缓存持续时间。

要查看您的网站目前正在使用什么，请使用启用“检查”选项并选择“网络”选项卡的Chrome查看页面。然后选择一个下载的文件来查看“Response Headers”信息。

举例来说，本SO页面下载了一个名为ados.js的脚本文件，该脚本文件的“max-age”值为604800（秒，7天）。这是浏览器在检查Web服务器是否有更新版本的文件之前可以等待的时间。如果文件几乎从未改变，那么7天可能是可以容忍的。

然而，7天的最大年龄可能太长了在浏览器缓存文件被频繁改变的动态情况下的持续时间。

欲了解更多信息，请参阅此MDN页面HTTP caching。

更改缓存控制指令取决于您的Web服务器。 对于ASP.NET，可以在web.config文件中完成。

要考虑的一个选项是两阶段发布方法。

阶段1：在释放之前将缓存控制指令更改为不缓存，以便任何即将发布的即将更新的缓存文件。

然后等待更新文件当前将其最大年龄值设置为的最长持续时间。这使得当前的网站浏览器可以获取“无缓存”指令。然后，所有当前网站浏览器都已准备好在文件更新发布后立即提取更新。

阶段2：使用所需的max-age缓存控制指令将文件更新发布到网站。由于在阶段1中完成了这些更新，因此应立即提取这些更新。

另一种方法是将当前最大年龄值缩短为较小的值，例如5分钟。此选项更简单，但在发布后的5分钟内可能会出现问题。然而，更短的时间跨度降低了对缓存的浏览器文件进行更新的可能性和/或影响。

Answer 4

您可以通过从前端破坏缓存来防止缓存。

您可以添加一个v={{number-of-version}}，并且您将始终确保加载的版本是您想要的版本。

有一个吞噬插件，它会在构建阶段处理文件的版本，所以你不必手动完成。它非常方便，您可以轻松将其集成到构建过程中。这里的链接gulp-annotate