言

云原生应用程序通常需要各种类型的可扩展缓存解决方案来提高性能。.NET Aspire 组件简化了连接到流行的缓存服务（例如 Redis）的过程。

本文的内容概要：

• 创建一个设置为使用 .NET Aspire 的基本 ASP.NET Core 应用程序。
• 添加.NET Aspire组件以连接到Redis并实现缓存。
• 配置 .NET Aspire 组件以满足特定要求。

环境准备

要使用 .NET Aspire，需要在本地安装以下软件：

• .NET 8.0
• .NET Aspire 工作负载：
• 使用 Visual Studio 安装程序
• 使用dotnet workload install aspire命令
• Docker 桌面
• 集成开发环境 (IDE) 或代码编辑器，例如：
• Visual Studio 2022 预览版 17.9 或更高版本（可选）
• Visual Studio 代码（可选）

有关详细信息，请参阅.NET Aspire 设置和工具。

举例示范

1.新建一个工程文件

1. 在 Visual Studio 顶部，导航到“文件” “新建” “项目...”。
2. 在对话框窗口中，在项目模板搜索框中输入.NET Aspire ，然后选择.NET Aspire Starter Application。选择下一步。
3. 在“配置新项目”屏幕上：
4. 输入项目名称AspireRedis。
5. 将其余值保留为默认值，然后选择“下一步”。
6. 在附加信息屏幕上：
7. 选择.NET 8.0 。
8. 取消选中“使用 Redis 进行缓存”
9. 最后选择创建。

Visual Studio 创建了一个新的 .NET Aspire 解决方案，其中包含以下项目：

• AspireRedis.Web 具有默认 .NET Aspire 配置的 Blazor UI 项目。
• AspireRedis.ApiService 具有默认 .NET Aspire 配置的最小 API，可为前端提供数据。
• AspireRedis.AppHost 一个协调器项目，旨在连接和配置应用程序的不同项目和服务。
• AspireRedis.ServiceDefaults 一个 .NET Aspire 共享项目，用于管理解决方案中与弹性、服务发现和遥测相关的项目中重复使用的配置。

2.使用输出缓存配置 UI

1. 将.NET Aspire StackExchange Redis 输出缓存组件包添加到您的AspireStorage应用程序中：

dotnet add package Aspire.StackExchange.Redis.OutputCaching --prerelease

（1）在Blazor 项目的Program.csAspireRedis.Web文件中，紧接着该行之后，添加对AddRedisOutputCachevar builder = WebApplication.CreateBuilder(args);扩展方法的调用：

builder.AddRedisOutputCache("cache");

（2）在项目的_appsettings.json文件中AspireRedis.Web，添加对应的连接字符串信息：

"ConnectionStrings": {
  "cache": "localhost:6379"
}

（3）将 Blazor 项目的Home.razor文件的内容替换AspireRedis.Web为以下内容：

@page "/"
@attribute [OutputCache(Duration = 10)]

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app on @DateTime.Now

该组件包含该[OutputCache]属性，该属性缓存整个呈现的响应。该页面还包含一个调用@DateTime.Now来帮助验证响应是否已缓存。

3.使用分布式缓存配置 API

将.NET Aspire StackExchange Redis 分布式缓存组件包添加到您的AspireRedis应用程序中：

dotnet add package Aspire.StackExchange.Redis.DistributedCaching --prerelease

（1）在Program.cs文件的顶部，添加对AddRedisDistributedCache 的调用：

builder.AddRedisDistributedCache("cache");

（2）在项目的_appsettings.json文件中AspireRedis.ApiService，添加对应的连接字符串信息：

"ConnectionStrings": {
  "cache": "localhost:6379"
}

（3）在Program.cs文件中，将现有/weatherforecast端点代码替换为以下内容：

app.MapGet("/weatherforecast", async (IDistributedCache cache) =>
{
    var cachedForecast = await cache.GetAsync("forecast");

    if (cachedForecast is null)
    {
        var summaries = new[] { "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching" };
        var forecast = Enumerable.Range(1, 5).Select(index =>
        new AspireRedis.WeatherForecast
        (
            DateOnly.FromDateTime(DateTime.Now.AddDays(index)),
            Random.Shared.Next(-20, 55),
            summaries[Random.Shared.Next(summaries.Length)]
        ))
        .ToArray();

        await cache.SetAsync("forecast", Encoding.UTF8.GetBytes(JsonSerializer.Serialize(forecast)), new ()
        {
            AbsoluteExpiration = DateTime.Now.AddSeconds(10)
        }); ;

        return forecast;
    }

    return JsonSerializer.Deserialize<IEnumerable<AspireRedis.WeatherForecast>>(cachedForecast);
})
.WithName("GetWeatherForecast");

4.配置应用程序宿主项目

更新项目的Program.csAspireRedis.AppHost文件以匹配以下代码：

var builder = DistributedApplication.CreateBuilder(args);

var redis = builder.AddRedisContainer("cache");

var apiservice = builder.AddProject<Projects.AspireRedis_ApiService>("apiservice")
    .WithReference(redis);

builder.AddProject<Projects.AspireRedis_Web>("webfrontend")
    .WithReference(apiservice)
    .WithReference(redis);

builder.Build().Run();

最后：在本地运行并测试应用程序

使用以下步骤测试应用程序的缓存行为：

1. 通过按钮来使用 Visual Studio 运行应用程序F5。
2. 如果出现“启动 Docker Desktop”对话框，请选择“是”启动该服务。
3. .NET Aspire Dashboard 在浏览器中加载并列出 UI 和 API 项目。

测试输出缓存：

1. 在项目页面的webfrontend行中，单击Endpointslocalhost列中的链接以打开应用程序的 UI。
2. 该应用程序将在主页上显示当前时间。
3. 每隔几秒刷新一次浏览器即可查看输出缓存返回的同一页面。10 秒后，缓存过期，页面将根据更新的时间重新加载。

测试分布式缓存：

1. 导航到Blazor UI 上的“天气”页面可以加载随机天气数据表。
2. 每隔几秒刷新一次浏览器即可查看输出缓存返回的相同天气数据。10 秒后，缓存过期，页面将重新加载更新的天气数据。

存是个老生长谈的问题，对于前端工程师来讲更是我们的必修课。或许很多人会说我的项目并没有问题，根本不需要聊什么缓存。如果真的是这样，只能证明你前端道路才刚刚开始。

背景

小郭今天分享缓存的原因在于：公司的一个核心APP中嵌入了SPA，而且应用核心都分布在SPA中，功能复杂且重。问题出现了：应用核心页面打开一直处于加载状态，排除掉弱网环境的原因，重点就在于没有缓存，每次进入页面都需要重载DOM和数据，拖慢页面打开速度。

那应该处理缓存问题呢？接下来小郭从三个方向来讲解。

浏览器缓存策略

在了解浏览器缓存前，我们需要先了解一下相关的概念：cache-control，expires，last-Modified，ETag。

浏览器通过请求头实现缓存，关键的请求头有cache-control，expires，last-Modified，ETag等。我们从时间和空间两个角度来看浏览器缓存。

时间

浏览器发送第一次请求：不缓存，服务端根据设定的缓存策略返回相应的header，如：cache-control，expires，last-Modified，ETag。

浏览器发送第二次请求：

• 强缓存策略：不需要和服务端通信就决定是否使用缓存，cache-control优先级大于expires① 有cache-control且不过期，返回本地磁盘缓存，状态值200；② 有expires且不过期，返回本地磁盘缓存，状态值200。
• 协商缓存策略：需要和服务端通信决定是否用缓存，Etag优先级大于last-Modified。① 有Etag，请求头添加If-None-Match，值就是上次返回的Etag值，然后发送给服务端。服务端对比If-None-Match与现有的Etag值是否一样；一样的话只返回header，状态码304，浏览器从本地磁盘获取缓存信息；不一样走正常流程，返回header+body，状态码200；② 有last-Modified，添加请求头If-Modified-Since，值是上次返回的last-Modified，然后发送给服务端。服务端对比If-Modified-Since与现有的是否一样；一样的话返回只返回header，状态码304，浏览器从本地磁盘获取缓存信息；不一样走正常流程，返回header+body，状态码200
• 无缓存

空间

• 浏览器和服务端：服务端需要决定使用哪种缓存策略并在响应头返回；前端不需要设置，是浏览器本身机制。
• html和静态资源：通常html不设置缓存，因为其它资源的入口都是html文件；静态资源（js，css，图片等）会设置缓存

部署时缓存的问题

如果缓存就按理论上设置，那就太简单了。在实际应用有个严重的问题，我们不仅要缓存代码，还需要更新代码。如果静态资源名字不变，怎么让浏览器即能缓存又能在有新代码时更新。最简单的解决方式就是静态资源路径添加一个版本值，版本不变就走缓存策略，版本变了就加载新资源。如下：

<script src="xx/xx.js?v=24334452"></script>

然而这种处理方式在部署时有问题。

解决方法：静态资源和页面是分开部署

• 先部署页面再部署静态资源，会出现用户访问到旧的资源
• 先部署静态资源再部署页面，会出现没有缓存用户加载到新资源而报错

这些问题的本质是以上的部署方式是“覆盖式发布”，解决方式是“非覆盖式发布”。即用静态资源的文件摘要信息给文件命名，这样每次更新资源不会覆盖原来的资源，先将资源发布上去。这时候存在两种资源，用户用旧页面访问旧资源，然后再更新页面，用户变成新页面访问新资源，就能做到无缝切换。简单来说就是给静态文件名加hash值。

那如何实现呢？

现在前端代码都用webpack之类的构建工具打包，那么结合webpack该怎么做，怎么才能做到持久化缓存？

webpack持久化缓存

一、webpack给文件名添加hash值是很简单的，但hash/chunkhash/contenthash要用哪个呢？

官方定义

hash: unique hash generated for every build

chunkhash: hashes based on each chunks' content

contenthash: hashes generated for extracted content

根据分析，contenthash才是我们需要的，内容有更新，hash值才会更新。

二、webpack会打包业务代码、第三方库及运行时代码，为保证缓存互不干扰，应该将它们提取出来。

第三方库提取方式是设置optimization的splitChunks的cacheGroups。splitChunks能提取模块，cacheGroups能缓存模块，并且cacheGroups的配置会覆盖splitChunks相同配置，既能提取又能缓存，故只需设置cacheGroups。

运行时代码的提取方式为配置runtimeChunk，默认为false，表示运行时代码嵌入到不同的chunk文件中；现在将运行时代码提取出来，并命名为manifest。

module.exports = {
  entry: {
    index: "./src/index.js",
    bar: "./src/bar.js"
  },
  output: {
    filename: "[name].[contenthash].js"
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          test:/[\\/]node_modules[\\/]/,
          name: "vendors",
          chunks: "all"
        }
      }
    },
    runtimeChunk: {
      name: "manifest"
    }
  }
};

三、 moduleName 和 chunkName 对文件的影响

module：就是js模块

chunk：webpack编译过程中由多个module组成的文件

bundle：bundle是chunk文件的最终状态，是webpack编译后的结果

一个文件被分离为3个文件，文件间怎么相互依赖的，会影响彼此打包，解决方法是将moduleId和chunkId改成按照文件路径生成。

optimization: {
  moduleIds: 'hashed',
  namedModules: true,
  namedChunks: true
}

这样子moduleId在编译后的文件是文件目录的hash值，更加安全。这也是namedChunks在production默认为false的原因，不想依赖的文件路径在编译后的文件直接展示，但是为了持久性缓存，这里也只能打开。

四、CSS文件缓存

当css代码提取成单独文件，当我们改变css时，怎么保证不影响引用它的js文件呢？配置如下：

plugins: [
  new MiniCssExtractPlugin({
    filename: "[contenthash].css"
  })
]

webpack持久化缓存目标是当且仅当该文件内容变动才改变该文件名字的hash值

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = { 
  output: { 
    filename: [name].[contenthash].js, // 让hash值只在内容变动时更新 
    chunkFilename: [name].[contenthash].js // 动态引入的模块命名，同上 
  }, 
  module: { 
    rules: [ { 
      test: /\.css$/, 
      use: [ 
        "loader: MiniCssExtractPlugin.loader", // 提取出来css "css-loader" 
      ] 
    } ] 
  }, 
  optimization: { 
    moduleIds: "hashed", // 混淆文件路径名 
    runtimeChunk: { name: 'manifest' }, // 提取runtime代码命名为manifest 
    namedModules: true, // 让模块id根据路径设置，避免每增加新模块，所有id都改变，造成缓存失效的情况 
    namedChunks: true, // 避免增加entrypoint，其他文件都缓存失效 
    cacheGroups: { 
      vendor: { // 提取第三方库文件 
        test: /[\\/]node_modules[\\/]/, 
        name: 'vendors', chunks: 'all', 
      }, 
    },
  } 
  plugins: [ 
    new webpack.HashedModuleIdsPlugin(), // 与namedModules: true作用一样 
    new MiniCssExtractPlugin({ 
      filename: "[contenthash].css", // css文件也是按contenthash命名 
      chunkFilename: "[contenthash].css", // 动态引入的css命名，同上 
    }) 
  ], 
}

总结

浏览器有其缓存机制，想要既能缓存又能在部署时没有问题，需要给静态文件名添加hash值。在webpack中，有些配置能让我们实现持久化缓存。感兴趣的同学可以自行去测试哦！

有任何问题可以在下方留言，想了解更多前端知识欢迎关注公众号“一郭鲜”，文章也将同步于公众号，前端学习不迷路

import streamlit as stst.write('Hello, world!')

import streamlit as stx = st.slider('x')
st.write(x, 'squared is', x * x)