ASP.NET Core MVC中的自动静态资源压缩中间件

还记得在.NET Framework时代的在cshtml中的静态资源压缩绑定的操作么？只需要在cshtml中@Scripts.Render就能将配置好的静态资源文件在生产环境中进行自动压缩打包处理，可是到了.NET Core MVC中，这样的操作已经被微软废弃掉了，而微软更推荐的做法是通过安装Bundle Minifier扩展插件或是nuget包进行静态资源捆绑的配置，会生成一个配置文件，不过我个人觉得这样的做法确实不太方便，所以也一直在寻找一种可以在.NET CoreMVC中可以直接@Scripts.Render的方式，今天，终于找到这样的组件，找回了.NET Framework时代的@Scripts.Render。

那就是一个外国人写的nuget包——Karambolo.AspNetCore.Bundling.NUglify。

通过这个nuget包，我们便可以实现在.NET Core MVC使用@Scripts.Render这样的方式去引用我们配置好的静态资源捆绑，且使用方式和.NET Framework中基本一致。它能够实现对js、css、less、scss等静态资源的自动打包捆绑处理。

其实这也是一个前端性能优化的点，将多个文件合并成了一个文件，减少了浏览器的请求数而提升网站的访问速度。

快速开始

首先我们新建一个ASP.NET Core MVC的项目，然后引用nuget包Karambolo.AspNetCore.Bundling.NUglify或者Karambolo.AspNetCore.Bundling.WebMarkupMin。

（如果你还需要做less或scss等css预处理的操作，还需要引入包Karambolo.AspNetCore.Bundling.Less或Karambolo.AspNetCore.Bundling.Sass。以及如果需要对ES6语法做处理，还可以引入Karambolo.AspNetCore.Bundling.EcmaScript。）

接下来，我们在Startup.cs中配置中间件：

先通过构造函数注入IWebHostEnvironment对象：

private readonly IHostingEnvironment _env;
public Startup(IConfiguration configuration, IHostingEnvironment env)
{
    Configuration = configuration;
    _env = env;
}

配置services：

services.AddBundling().UseDefaults(_env) // 必需的，告诉中间件当前的处理环境路径相关
    .UseNUglify() // 或者 .UseWebMarkupMin() 都可以实现静态资源捆绑压缩
    .AddLess() // 启用less预处理
    .AddSass() // 启用sass预处理
    .AddEcmaScript() // 启用es6脚本预处理
    .EnableCacheHeader(TimeSpan.FromDays(1)); // 启用客户端缓存头

然后我们就可以使用该中间件进行静态资源的相关配置了，同时，它也兼容Bundle Minifier插件的bundleconfig.json配置的支持；

比如本站之前的页面中有如下的css和js需要进行加载的：


那么中间件就会有如下的配置代码：

app.UseBundling(bundles =>
{
    bundles.LoadFromConfigFile("/bundleconfig.json", _env.ContentRootFileProvider); // 如果你需要对Bundle Minifier的配置也进行处理
    bundles.AddCss("/main.css") // 告诉中间件需要将以下的文件最终打包成一个虚拟文件名
        .Include("/Content/bootstrap.min.css")
        .Include("/fonts/icomoon.min.css")
        .Include("/Content/jquery.paging.css")
        .Include("/Content/common/reset.css")
        .Include("/Content/common/loading.css")
        .Include("/Content/common/style.css")
        .Include("/Content/common/articlestyle.css")
        .Include("/Content/common/leaderboard.css")
        .Include("/Content/microtip.min.css")
        .Include("/Assets/breadcrumb/style.css")
        .Include("/Assets/nav/css/style.css")
        .Include("/Assets/tippy/tippy.css");
        
    bundles.AddJs("/main.js") // 告诉中间件需要将以下的文件最终打包成一个虚拟文件名
          .Include("/Scripts/bootstrap.min.js")
        .Include("/Scripts/bootstrap-suggest.min.js")
        .Include("/Scripts/jquery.query.js")
        .Include("/Scripts/jquery.paging.js")
        .Include("/Scripts/ripplet.js")
        .Include("/Scripts/global/scripts.js")
        .Include("/Assets/tippy/tippy.js")
        .Include("/Assets/newsbox/jquery.bootstrap.newsbox.js")
        .Include("/Assets/tagcloud/js/tagcloud.js")
        .Include("/Assets/scrolltop/js/scrolltop.js")
        .Include("/Assets/nav/js/main.js");
});

注意文件的路径没有“~”号了。且所有文件都是本地存在的，否则可能不会被正常打包。

同样，如果你还需要对less，sass进行预处理，也是bundles.AddLess，AddSass等操作。

这样我们在cshtml中进行@Scripts.Render的时候，中间件就知道该去加载哪些静态文件来打包处理了，通常情况下，引用bundle虚拟文件的路径需要加上~/bundles前缀路径，比如上面我将静态文件名设置为main.js，则在cshtml中引用时，路径为~/bundles/main.js。

但是，在cshtml里引用打包文件之前，我们还需要做一步操作，那就是需要引入这个中间件的TagHelper；

在_ViewImports.cshtml中追加：

@using Karambolo.AspNetCore.Bundling.ViewHelpers
@addTagHelper *, Karambolo.AspNetCore.Bundling

现在，可以在cshtml中使用：

@await Styles.RenderAsync("~/bundles/main.css")
@await Scripts.RenderAsync("~/bundles/main.js")

不过这样还有一个细节问题就是我们本地调试的时候，它也会被打包处理，所以我们还需要分环境进行加载，使用微软自带的environment标签：

<environment names="Development">
    <link href="~/Content/bootstrap.min.css" rel="stylesheet">
    <link href="~/fonts/icomoon.min.css" rel="stylesheet" />
    <link href="~/Content/jquery.paging.css" rel="stylesheet" />
    <link href="~/Content/common/reset.css" rel="stylesheet" />
    <link href="~/Content/common/loading.css" rel="stylesheet" />
    <link href="~/Content/common/style.css" rel="stylesheet" />
    <link href="~/Content/common/articlestyle.css" rel="stylesheet" />
    <link href="~/Content/common/leaderboard.css" rel="stylesheet" />
    <link href="~/Content/microtip.min.css" rel="stylesheet" />
    <link href="~/Assets/breadcrumb/style.css" rel="stylesheet" />
    <link href="~/Assets/nav/css/style.css" rel="stylesheet" />
    <link href="~/Assets/tippy/tippy.css" rel="stylesheet" />
    <script src="~/Scripts/bootstrap.min.js"></script>
    <script src="~/Scripts/bootstrap-suggest.min.js"></script>
    <script src="~/Scripts/jquery.query.js"></script>
    <script src="~/Scripts/jquery.paging.js"></script>
    <script src="~/Scripts/ripplet.js"></script>
    <script src="~/Scripts/global/scripts.js"></script>
    <script src="~/Assets/tippy/tippy.js"></script>
    <script src="~/Assets/newsbox/jquery.bootstrap.newsbox.js"></script>
    <script src="~/Assets/tagcloud/js/tagcloud.js"></script>
    <script src="~/Assets/scrolltop/js/scrolltop.js"></script>
    <script src="~/Assets/nav/js/main.js"></script>
</environment>
<environment names="Stage,Production">
    @await Styles.RenderAsync("~/bundles/main.css")
    @await Scripts.RenderAsync("~/bundles/main.js")
</environment>

这样，就完美的实现了开发环境可以正常的看到css和js的源码，方便调试，生产环境就是一个虚拟文件，大大的减少了浏览器的请求数。

通过查看本站的源码可以发现，已经合并成了这样的两个文件：