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

翔星

有10年+工作经验，高级软件工程师，可以解决各种问题

还记得在.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等静态资源的自动打包捆绑处理。

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

快速开始
懒得勤快的博客_互联网分享精神masuit.com|ldqk.org|ldqk.xyz| http:// masuit.orgASP.NET Core MVC中的自动静态资源压缩中间件

首先我们新建一个 http:// 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中配置中间件：
懒得勤快的博客_互联网分享精神masuit.com|ldqk.org|ldqk.xyz| http:// masuit.orgASP.NET Core MVC中的自动静态资源压缩中间件

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


             privatereadonlyIHostingEnvironment_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中追加：


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

现在，可以在cshtml中使用：


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

不过这样还有一个细节问题就是我们本地调试的时候，它也会被打包处理，所以我们还需要分环境进行加载，使用微软自带的environment标签：这样，就完美的实现了开发环境可以正常的看到css和js的源码，方便调试，生产环境就是一个虚拟文件，大大的减少了浏览器的请求数。


             <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>

通过查看本站的源码可以发现，已经合并成了这样的两个文件：
懒得勤快的博客_互联网分享精神masuit.com|ldqk.org|ldqk.xyz| http:// masuit.orgASP.NET Core MVC中的自动静态资源压缩中间件

本站项目实战源码：

https:// github.com/ldqk/Masuit. MyBlogs/tree/master/src/Masuit.MyBlogs.Core

更多的用法，可以参考这个项目在github上的源码：

https:// github.com/adams85/bund ling

出处： https:// ldqk.xyz/1749? t=vkrlukkun9xc


             关注公众号：DotNet开发跳槽❀觉得不错，请点个在看呀

发布于 2023-03-15 07:12 ・IP 属地北京

.NET Core

MVC

快速开始 懒得勤快的博客_互联网分享精神masuit.com|ldqk.org|ldqk.xyz| http:// masuit.orgASP.NET Core MVC中的自动静态资源压缩中间件

快速开始
懒得勤快的博客_互联网分享精神masuit.com|ldqk.org|ldqk.xyz| http:// masuit.orgASP.NET Core MVC中的自动静态资源压缩中间件