如何在Blazor中调用bundled js文件内被minification重命名的函数？

有多种稳定方案可以避免minification改写函数名导致的Blazor JS互操作失败，核心逻辑都是主动锁定需要被Blazor调用的函数的公开名称，避开minify的自动改写规则，常用方案如下：

方案1：将互操作函数挂载到全局window对象（最推荐） #

minification默认只会压缩函数内部的局部变量/私有函数名，不会修改挂载到window下的自定义属性名，你只需要把所有需要被Blazor调用的JS函数统一挂载到一个自定义全局对象下即可：

// 你的源JS文件代码
window.BlazorInteropAPI = {
  // 所有需要对外暴露的函数都放在这个对象里
  getCurrentTime: function () {
    return new Date().toISOString();
  },
  showUserAlert: function (content) {
    alert(content);
  }
}

打包后你可以直接在Blazor中通过IJSRuntime正常调用，名称不会被改写：

// Blazor C# 调用示例
await JS.InvokeVoidAsync("BlazorInteropAPI.showUserAlert", "测试内容");
var time = await JS.InvokeAsync<string>("BlazorInteropAPI.getCurrentTime");

这个方案不需要修改任何打包工具配置，还能避免全局命名冲突，兼容性最好。

方案2：配置minify工具保留指定函数名 #

如果你不想挂载全局对象，可以在你使用的minify工具（Terser、ASP.NET Core自带打包工具等）的配置中，添加需要保留的函数名到排除列表：

针对Terser（Vite/Webpack/Rollup常用） #

在Terser配置中添加mangle.reserved配置项：

// terser.config.js 示例
module.exports = {
  mangle: {
    reserved: ["getCurrentTime", "showUserAlert"]
  }
}

针对ASP.NET Core自带的Bundling & Minification工具 #

修改bundleconfig.json的minify配置：

{
  "outputFileName": "wwwroot/js/bundled.min.js",
  "inputFiles": ["wwwroot/js/src/*.js"],
  "minify": {
    "enabled": true,
    "mangle": {
      "reserved": ["getCurrentTime", "showUserAlert"]
    }
  }
}

内容的提问来源于stack exchange，提问作者Bogdan B