需要在 Blazor WebAssembly 站点中对 CSS 文件进行缓存清除

Question

我有一个 Blazor WASM .NET6 应用程序，它在其 index.html 中使用两个样式表：

<link href="css/app.min.css" rel="stylesheet" />
<link href="css/Client.min.css" rel="stylesheet" />

如何在构建时向文件添加一些版本号或日期，例如：

<link href="css/app.min.20211119.css" rel="stylesheet" />
<link href="css/Client.min.20211119.css" rel="stylesheet" />

触发浏览器下载新副本？

我的构建管道中已经设置了 PostCSS，所以我可以使用 npm 解决方案。

它需要创建新文件并更新 index.html

我发现了几个类似的问题，但都没有有效的解决方案。

更新：
我找到了Replace in file npm 包，它似乎可以满足我的需要。将它与fs.rename npm 包结合使用，我应该能够在我的文件名中添加指纹并更改我的 index.html 中的链接。
我已经想出了如何为 index.html 中的链接执行此操作：

// in package.json
"fingerprint": "replace-in-file --configFile=fingerprint.config.js"

// in fingerprint.config.js
module.exports = {
    files: 'wwwroot/index.html',
    from: [/app.(min|[0-9]*).css/g, /Client.(min|[0-9]*).css/g],
    to: ['app.' + require('dayjs')().format('YYYYMMDDHHmm') + '.css', 'Client.' + require('dayjs')().format('YYYYMMDDHHmm') + '.css'],
};

这段代码在后期构建中运行，所以这段 javascript 中没有任何内容最终出现在最终代码中。

我整天都在尝试重命名实际的 CSS 文件。但不能让它工作。 我的尝试：

// In package.json
    "rename:fs": "node -e \"require('fs').rename('wwwroot/css/app.min.css', 'wwwroot/css/app.'+require('dayjs')().format('YYYYMMDDHHmm')+'.css', () => {})\"",
    "rename:2": "renamer --dry-run --find \"/^(app|Client).(min|[0-9]*).css$/\" --replace \"$1.bar.css\" \"wwwroot/css/*\"",
    "rename": "node -e rename.js"

// rename.js
const fs = require('fs');
const path = require('path');
//var args = process.argv.slice(2);
var dir = "wwwroot/css/";
var match = RegExp("^(app|Client).(min|[0-9]*).css$", 'g');
var fp = require('dayjs')().format('YYYYMMDDHHmm');
var replace = RegExp('$1.' + fp + '.css');
var files;

//reading the dir
files = fs.readdirSync(dir);
files.filter(function (file) {
    return file.match(match);
}).forEach(function (file) {
    var filePath = path.join(dir, file),
        newFilePath = path.join(dir, file.replace(match, replace));
    //using fs.rename function to rename files
    fs.renameSync(filePath, newFilePath);
});

重命名器版本rename:2 效果最好。我可以在查找部分使用 RegEx，但无法在替换部分使用。
现在我将坚持更改查询字符串，而不是我想要的解决方案。但现在已经足够了。

Answer 1

在开发过程中，我使用这个 javascript 解决方法。 它应该被我删除并替换为您原来的生产标记，尤其是当您可能试图在 webassembly 应用程序中避免使用 javascript 时。

let dt=new Date();
const lnk=document.createElement('link');
lnk.setAttribute('href','css/app.min.css?u='+dt.getTime());
lnk.setAttribute('rel','stylesheet');
document.getElementByTagName('head')[0].appandChild('lnk');

CSS 文件上的唯一查询字符串强制浏览器获取新副本，但应用程序只是忽略了额外的数据。

Answer 2

更好的答案可能是在 Web 程序集中添加 css 标签：

<link href="css/@(myawesomeappcss)" rel="stylesheet"/>
<link href="css/@(myawesomeclientcss)" rel="stylesheet"/>

然后使用以下内容：

@code
{
  private string myawesomeappcss = "app.min.css?u=";
  private string myawesomeclientcss = "client.min.css?u=";

  protected override async Task OnInitializedAsync()
  {
    DateTime dt= DateTime.Now;
    myawesomeappcss += ((DateTimeOffset)dt).ToUnixTimeSeconds();
    dt = dt.AddMilliseconds(1);
    myawesomeclientcss += ((DateTimeOffset)dt).ToUnixTimeSeconds();
  }
}

尽管 javascript 版本在发布之前会更容易删除。