ASP.NET Core 6 MVC中如何注册JS文件捆绑包？

ASP.NET Core 6采用了简化的WebApplication启动模型，原有的AddBundle方法已被移除，目前主流有两种实现捆绑的方式，分别对应运行时和编译时场景：

方式一：运行时捆绑（WebOptimizer） #

这是官方推荐的运行时捆绑方案，支持动态合并、压缩资源：

1. 安装NuGet包
   在项目中安装Microsoft.AspNetCore.WebOptimizer：

Install-Package Microsoft.AspNetCore.WebOptimizer

或者通过.NET CLI执行：

dotnet add package Microsoft.AspNetCore.WebOptimizer

2. 在Program.cs中注册服务并配置捆绑规则

var builder = WebApplication.CreateBuilder(args);

// 注册WebOptimizer服务并定义捆绑规则
builder.Services.AddWebOptimizer(pipeline =>
{
    // 合并指定JS文件为一个捆绑包
    pipeline.AddJavaScriptBundle("/bundles/site.js", 
        "/js/jquery.js", 
        "/js/bootstrap.js", 
        "/js/custom.js");

    // 可选：合并并压缩CSS文件
    pipeline.AddCssBundle("/bundles/site.css", 
        "/css/bootstrap.css", 
        "/css/site.css");
});

// 添加MVC服务
builder.Services.AddControllersWithViews();

var app = builder.Build();

// 启用WebOptimizer中间件（需在UseStaticFiles之前）
app.UseWebOptimizer();

// 其他中间件配置
app.UseStaticFiles();
app.UseRouting();
app.UseAuthorization();

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

app.Run();

3. 在视图中引用捆绑包

<link rel="stylesheet" href="/bundles/site.css" />
<script src="/bundles/site.js"></script>

方式二：编译时捆绑（BundlerMinifier） #

如果希望在编译阶段就完成资源的合并压缩，可使用BundlerMinifier工具：

1. 安装工具
   可以通过Visual Studio扩展市场安装「Bundler & Minifier」扩展，或者安装NuGet包：

Install-Package BundlerMinifier.Core

2. 创建bundleconfig.json配置文件
   在项目根目录添加bundleconfig.json，定义捆绑规则：

[
  {
    "outputFileName": "wwwroot/bundles/site.css",
    "inputFiles": [
      "wwwroot/css/bootstrap.css",
      "wwwroot/css/site.css"
    ],
    "minify": {
      "enabled": true
    }
  },
  {
    "outputFileName": "wwwroot/bundles/site.js",
    "inputFiles": [
      "wwwroot/js/jquery.js",
      "wwwroot/js/bootstrap.js",
      "wwwroot/js/custom.js"
    ],
    "minify": {
      "enabled": true,
      "renameLocals": true
    }
  }
]

3. 编译项目并引用资源
   编译项目时，工具会自动生成捆绑压缩后的文件，直接在视图中引用即可：

<link rel="stylesheet" href="~/bundles/site.css" />
<script src="~/bundles/site.js"></script>

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