如何在 Visual Studio Blazor Wasm 应用程序调试期间停止 Chrome 缓存

Question

我正在使用一个小型 Blazor Wasm 应用程序来学习网络编程。特别是带有 AspNetCore v3.2.0 和 Chrome v83.0.4103.116 的 Visual Studio Community 2019 v16.6.2。有时，当我运行调试器时，我对代码（JavaScript 和 Blazor）所做的更改不会应用，除非我执行硬刷新。我在 Chrome DevTools 的网络部分设置了“禁用缓存”，但它在调试会话之间没有保持设置。每次调试时都必须进行硬刷新以防万一当然是一个很大的痛苦。知道在这些情况下我可以做些什么来防止缓存吗？

Answer 1

简答

在index.html文件的开头，在任何 Blazor 初始化之前，编写一个 Javascript 方法调用来清除 Blazor 缓存：

<script type="text/javascript">
    caches.delete("blazor-resources-/").then(function (e) {
        console.log("'blazor-resources-/' cache deleted");
    });
</script>

通过这样做，缓存存储将在每次页面加载时清除，就在 Blazor 初始化之前。

完整答案

我认为最好根据上下文控制 this 的行为。对于基本的 if in Debug或Release配置，假设您在ASP.NET Core上托管Blazor WASM应用程序，以下是步骤：

• 从您的服务器项目上的客户端 WASM项目中复制您的index.html文件，在您可能拥有的Pages文件夹中。就我而言，我已将其复制到./Pages/
• 将文件重命名为_Host.cshtml或适合您的名称。
• 打开这个新文件。如果此页面来自路由上下文，我们现在将在其中声明这是根页面，并且我们将根据我们实际是否处于调试模式添加明确的缓存逻辑。您的文件内容可能如下所示：

<script type="text/javascript">
    caches.delete("blazor-resources-/").then(function (e) {
        console.log("'blazor-resources-/' cache deleted");
    });
</script>

• 现在在您的服务器项目中的Startup.cs文件中：更改：

  endpoints.MapFallbackToFile("index.html");
  

  到：

  endpoints.MapFallbackToPage("/_Host");
  

• 如果它不起作用，您可能必须为Razor 视图指定根搜索路径。在ConfigureServices 中，将AddRazorPages更改为适合您当前配置的内容以找到您的起始视图：

  services.AddRazorPages(options => options.RootDirectory = "/Pages");
  

• 就是这样 ！. 如果一切顺利，您的 Blazor WASM 索引页面现在将是启动时的 CSHTML 页面，并且因为我们有条件地注入清除缓存代码，缓存将在每次页面加载时被清除，但在应用程序执行时不会出现该行为在发布配置模式下发布或构建。