还记得在.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的源码,方便调试,生产环境就是一个虚拟文件,大大的减少了浏览器的请求数。
通过查看本站的源码可以发现,已经合并成了这样的两个文件: