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

Posted 2023-02-22

【中文标题】需要避免每次构建时浏览器刷新的情况

【英文标题】：Need to avoid situation of browser refresh with every build

【发布时间】：2017-09-10 13:04:21

【问题描述】：

在我们的项目中，我们遵循频繁的部署过程。每次部署时，我们的客户端都必须刷新浏览器以反映由于浏览器缓存而发生的变化。我想知道我们怎样才能避免这种情况......即，当我们部署它时，它应该直接反映在所有用户的浏览器中，而不需要刷新。请帮我解决这个问题。

【问题讨论】：

太宽泛了。这听起来很棒，但实际上它会过度增加开销。突然对用户进行更改也不是一个好主意。您是用于开发还是生产？您是在更改代码还是只是一个参数/文本？

目前仅用于开发。有时也会更改代码。

【参考方案1】：

有一种称为热模块更换的解决方案。这会无缝替换你的 webpack 包（假设你已经在使用它）。

请参阅What exactly is Hot Module Replacement in Webpack? 获取一些参考资料。 HMR 设置非常复杂，并且每个框架都不同。

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

【参考方案2】：

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

您可以添加v=number-of-version，您将始终确信加载的版本是您想要的版本。

有一个 gulp 插件可以在构建阶段处理您的文件版本，因此您不必手动执行此操作。它很方便，您可以轻松地将其集成到您的构建过程中。这是链接gulp-annotate

【参考方案3】：

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

要查看您的网站当前使用的内容，请使用启用了“检查”选项并选择“网络”标签的 Chrome 查看页面。然后选择一个下载的文件以查看“响应标头”信息。

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

但是，对于浏览器缓存文件频繁更改的动态情况，最长 7 天的持续时间可能太长了。

有关更多信息，请参阅HTTP caching 上的此 MDN 页面。

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

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

第 1 阶段：在发布之前将缓存控制指令更改为无缓存，用于即将被挂起的版本更新的任何可缓存文件。

然后等待更新文件当前设置其 max-age 值的最长持续时间。这允许当前网站浏览器获取“无缓存”指令。然后，所有当前网站浏览器都已准备好在文件更新发布后立即获取更新。

第 2 阶段：使用所需的 max-age cache-control 指令向网站发布文件更新。由于第 1 阶段所做的工作，应立即获取这些更新。

另一种选择是将当前的 max-age 值缩短为更小的值，例如 5 分钟。这个选项比较简单，但是在发布后的那 5 分钟内可能会出现问题。但是，较短的时间跨度会降低对缓存的浏览器文件进行更新的可能性和/或影响。