Asp.Net静态资源动态压缩之WebOptimization

一、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动态压缩处理的文件内容是在内存中，而不是将文生成好的文件存储在磁盘(这一点还没更具体验证)。

摘自源代码：

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

http://www.jb51.net/article/84331.htm

http://www.cnblogs.com/dudu/p/3148004.html