一、Asp.Net中对Css/Js的动态压缩工具 WebOptimization
在Asp.NetMVC自带的模板项目中自动引入了当前WebOptimization工具。如果使用的空模板Nuget命令安装或者使用Nuget管理工具安装
Install-Package Microsoft.AspNet.Web.Optimization
CodePlex源代码地址:http://aspnetoptimization.codeplex.com/
Nuget命令地址:http://www.nuget.org/packages/Microsoft.AspNet.Web.Optimization/
目前的版本是:2014年2月20日,Microsoft ASP.NET... 1.1.3 (this version)
程序包依赖:
- Microsoft.Web.Infrastructure (>= 1.0.0)
- WebGrease (>= 1.5.2)
二、特别说明
1. BundleTable.EnableOptimizations = true;
指定启用绑定规则,默认模式下本地测试不启用动态压缩,发布IIS后会启用。
2.CssRewriteUrlTransform 类定义了css中的url的先对路径处理,如果合并文件的目录结构和原始css的目录不再同一级的时候,需要用到该类。
处理的结果是生成的url都是从网站根目录开始查找。
3.JsMinify,Js的压缩进行了代码混淆处理,但是没有对js中指定样式的url进行处理,这一点需要注意,特别是在目录结构不再同一级的时候。
4.绑定的地址如果不指定扩展名的时候,注意不能和路由中的地址相同,否则会冲突。
例如:绑定生成js文件:‘~/Myjs’,那么MyJsController控制器将路由不到了
5.Web.Optionmization动态压缩处理的文件内容是在内存中,而不是将文生成好的文件存储在磁盘(这一点还没更具体验证)。
摘自源代码:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
/// <summary> /// Stores the response for the bundle in the cache, also sets up cache depedencies for the virtual files /// used for the response /// </summary> /// <param name="context"></param> /// <param name="bundle"></param> /// <param name="response"></param> public void Put(BundleContext context, Bundle bundle, BundleResponse response) { List<string> paths = new List<string>(); paths.AddRange(response.Files.Select(f => f.VirtualFile.VirtualPath)); paths.AddRange(context.CacheDependencyDirectories); string cacheKey = bundle.GetCacheKey(context); // REVIEW: Should we store the actual time we read the files? CacheDependency dep = context.VirtualPathProvider.GetCacheDependency(context.BundleVirtualPath, paths, DateTime.UtcNow); context.HttpContext.Cache.Insert(cacheKey, response, dep); bundle.CacheKeys.Add(cacheKey); }
三、使用步骤
1.新建MVC项目,安装WebOptimaization工具
2.在App_Start文件夹中添加BundleConfig.cs程序启动注册代码
public class BundleConfig { public static void RegisterBundles(BundleCollection bundles) { //特别说明 //1.绑定的地址如果不指定扩展名的时候,注意不能和路由中的地址相同,否则会冲突 // 例如:绑定生成js文件:‘~/Myjs’,那么MyJsController控制器将路由不到了 //指定启用绑定规则 BundleTable.EnableOptimizations = true; /**************Css内容压缩**********/ //Css样式捆绑 bundles.Add(new StyleBundle("~/Content/common").Include( "~/content/site.css", "~/content/bootstrap.min.css" )); //指定重写样式中的url相对地址 //css在引入的时候可以不用关心目录结构 bundles.Add(new StyleBundle("~/content/mystyle").Include( "~/content/css/back.css", new CssRewriteUrlTransform() ).Include( "~/content/css/animate.css" )); /**********Javascript内容压缩混淆**********/ //Js捆绑 //特别说明,可以指定模糊版本号处理 bundles.Add(new ScriptBundle("~/bundles/jquery").Include( "~/scripts/jquery-{version}.min.js" )); bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include( "~/scripts/bootstrap.min.js" )); //特别说明,目前没有对js中配置url进行处理 //在使用的时候需要注意目录结构 bundles.Add(new ScriptBundle("~/MyJs").Include( "~/content/back.js" )); } }
3.在Global.asax启动中注册
protected void Application_Start(object sender, EventArgs e) { //注册路由 RouteConfig.RegisterRoutes(RouteTable.Routes); //程序启动时注册静态资源处理 BundleConfig.RegisterBundles(System.Web.Optimization.BundleTable.Bundles); }
4.前台使用:
@Styles.Render("~/Content/common") @Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@Styles.Render("~/content/mystyle") @*手动引入js中指定url是正确的*@ @*<script src="~/Scripts/MyJs/Back.js"></script>*@ @Scripts.Render("~/MyJs")
生成链接:
JS的混淆处理实例:
源代码:
$(function () { myInitOnLoad(); function myInitOnLoad() { $('.back2').css({ background: 'url("images/newico.gif") no-repeat', width: 50, height: 50 }); } });
处理后:
相关文章:
http://www.cnblogs.com/libingql/archive/2013/12/22/3486269.html