言

云原生應用程序通常需要各種類型的可擴展緩存解決方案來提高性能。.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)