ASP.NET Core 6 MVC中能否将压缩版JS/CSS与视图/组件共存？

方案一：通过项目文件（.csproj）手动配置发布规则 #

ASP.NET Core 6默认只识别*.cshtml.js和*.cshtml.css格式的视图关联文件，带.min的变体不会被自动处理。你可以直接在项目文件中添加配置，指定这类压缩文件的发布行为：

在你的.csproj文件中加入以下内容：

<ItemGroup>
  <!-- 处理压缩JS文件 -->
  <Content Include="Views/**/*.cshtml.min.js">
    <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
    <!-- 将文件发布到wwwroot，同时移除文件名中的.cshtml前缀 -->
    <Link>wwwroot\%(FileName.Replace(".cshtml.min", ".min")).js</Link>
  </Content>
  <!-- 处理压缩CSS文件 -->
  <Content Include="Views/**/*.cshtml.min.css">
    <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
    <Link>wwwroot\%(FileName.Replace(".cshtml.min", ".min")).css</Link>
  </Content>
</ItemGroup>

配置说明：

• Include指定匹配Views目录下所有.cshtml.min.js/.css文件
• CopyToPublishDirectory确保发布时复制最新版本的文件
• Link定义输出路径和文件名，最终生成wwwroot/xxx.min.js/css，和非压缩版的输出逻辑对齐

引用压缩文件时，直接使用静态文件路径即可：

<script src="~/xxx.min.js"></script>
<link rel="stylesheet" href="~/xxx.min.css">

方案二：用构建工具自动生成压缩文件到wwwroot #

如果需要批量处理压缩和发布，推荐用Gulp、Webpack这类构建工具，自动将*.cshtml.js/css压缩后输出到wwwroot目录：

以Gulp为例，先安装依赖：

npm install gulp gulp-uglify gulp-rename gulp-clean-css --save-dev

创建gulpfile.js并添加压缩任务：

const gulp = require('gulp');
const uglify = require('gulp-uglify');
const cleanCss = require('gulp-clean-css');
const rename = require('gulp-rename');

// 压缩JS
gulp.task('minify-js', function() {
  return gulp.src('Views/**/*.cshtml.js')
    .pipe(uglify())
    .pipe(rename(path => {
      // 移除文件名中的.cshtml后缀，添加.min
      path.basename = path.basename.replace('.cshtml', '');
      path.extname = '.min.js';
    }))
    .pipe(gulp.dest('wwwroot'));
});

// 压缩CSS
gulp.task('minify-css', function() {
  return gulp.src('Views/**/*.cshtml.css')
    .pipe(cleanCss())
    .pipe(rename(path => {
      path.basename = path.basename.replace('.cshtml', '');
      path.extname = '.min.css';
    }))
    .pipe(gulp.dest('wwwroot'));
});

// 默认任务
gulp.task('default', gulp.parallel('minify-js', 'minify-css'));

运行gulp命令后，压缩文件会自动生成到wwwroot目录，引用方式和方案一一致。你还可以把这个任务绑定到项目的构建事件中，实现自动触发。

额外注意事项 #

• 开发环境可以继续使用未压缩的*.cshtml.js/css，生产环境切换为*.min.js/css，可通过ASP.NET Core的环境标签辅助切换：

  <environment include="Development">
    <script src="~/xxx.js"></script>
  </environment>
  <environment exclude="Development">
    <script src="~/xxx.min.js"></script>
  </environment>
  

• 发布后检查bin/Publish/wwwroot目录，确认压缩文件是否已正确生成。

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