ASP.NET Core多环境下bundleconfig.json的管理与最佳实践

我完全懂你这种“怎么反而变麻烦了”的感受！旧版BundleCollection只需要维护一份源文件列表，就能根据DEBUG指令自动切换压缩与否，现在新范式好像要手动维护两份文件列表，感觉像是开倒车对吧？其实不是你遗漏了什么，而是ASP.NET Core的资源打包思路从运行时动态处理转向了构建时预处理，我们可以通过下面这些方法来优化，避免重复维护列表：

一、优化 bundleconfig.json 配合 <environment> 标签的工作流 #

你提到的两种方式其实可以优化，不用手动维护两份源文件列表：

• 利用 bundleconfig.json 生成双版本输出
  在bundleconfig.json中，为每个捆绑包同时配置压缩和未压缩的输出，源文件列表只需要写一次再复用即可：

  [
    {
      "outputFileName": "wwwroot/css/site.min.css",
      "inputFiles": [
        "wwwroot/css/bootstrap.css",
        "wwwroot/css/site.css"
      ],
      "minify": { "enabled": true }
    },
    {
      "outputFileName": "wwwroot/css/site.css",
      "inputFiles": [
        "wwwroot/css/bootstrap.css",
        "wwwroot/css/site.css"
      ],
      "minify": { "enabled": false }
    }
  ]
  

  之后用<environment>标签根据当前环境加载对应文件：

  <environment include="Development">
    <link rel="stylesheet" href="~/css/site.css" />
  </environment>
  <environment exclude="Development">
    <link rel="stylesheet" href="~/css/site.min.css" />
  </environment>
  

  搭配工具就能自动处理打包：比如Visual Studio的Bundler & Minifier扩展，或者dotnet bundle命令行工具，它们会自动监视源文件变化，同步生成两个版本的打包文件，不用你手动更新。

• 配置构建时自动执行打包
  可以在项目文件里添加配置，让每次构建都自动完成打包操作：

  <Target Name="BundleMinify" AfterTargets="Build">
    <Exec Command="dotnet bundle" />
  </Target>
  

  这样不管是开发还是生产环境构建，都会自动生成最新的压缩/未压缩文件，省去手动操作的麻烦。

二、转向前端构建工具（Gulp/Webpack）解决多环境问题 #

如果觉得上面的方式还是不够优雅，那确实可以考虑用Gulp这类前端构建工具，它们天生支持多环境配置，完全不用维护两份列表：

• Gulp 示例：根据环境变量自动切换压缩
  先安装必要的依赖包，然后在gulpfile.js中编写逻辑，根据ASPNETCORE_ENVIRONMENT变量自动判断是否压缩：

  const gulp = require('gulp');
  const concat = require('gulp-concat');
  const uglify = require('gulp-uglify');
  const cleanCss = require('gulp-clean-css');
  const gulpIf = require('gulp-if');
  
  // 获取当前ASP.NET Core环境变量
  const isProduction = process.env.ASPNETCORE_ENVIRONMENT === 'Production';
  
  // 打包JS
  gulp.task('bundle-js', () => {
    return gulp.src(['wwwroot/js/**/*.js', '!wwwroot/js/**/*.min.js'])
      .pipe(concat('site.js'))
      .pipe(gulpIf(isProduction, uglify()))
      .pipe(gulp.dest('wwwroot/dist/js'));
  });
  
  // 打包CSS
  gulp.task('bundle-css', () => {
    return gulp.src(['wwwroot/css/**/*.css', '!wwwroot/css/**/*.min.css'])
      .pipe(concat('site.css'))
      .pipe(gulpIf(isProduction, cleanCss()))
      .pipe(gulp.dest('wwwroot/dist/css'));
  });
  
  gulp.task('default', gulp.parallel('bundle-js', 'bundle-css'));
  

  再在项目文件里配置构建时执行Gulp，并传递环境变量：

  <Target Name="GulpBundle" AfterTargets="Build">
    <Exec Command="gulp" EnvironmentVariables="ASPNETCORE_ENVIRONMENT=$(ASPNETCORE_ENVIRONMENT)" />
  </Target>
  

  这样不管是开发还是生产环境，只需要维护一份源文件匹配规则，Gulp会自动根据环境决定是否压缩，甚至可以输出相同文件名的文件——开发环境是未压缩版，生产环境是压缩版，<environment>标签里直接引用同一个文件路径就行。

三、为什么新版范式看起来是“倒退”？ #

其实这是设计思路的转变：旧版BundleCollection是在运行时动态合并压缩，好处是灵活，但缺点是每次请求都要处理（虽然有缓存），而且对现代前端生态的支持有限。新版的构建时打包，是把资源处理交给专业的前端工具链，更符合现代前端开发流程，也能获得更好的性能（打包结果提前生成，不用运行时消耗资源处理）。

总结下来，如果你想尽量贴近旧版的使用体验，优化bundleconfig.json配置+自动打包工具是不错的选择；如果追求更灵活的多环境处理和前端生态集成，Gulp/Webpack这类工具会更合适。

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