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)

程序包依赖:

二、特别说明

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);
}
View Code

 

三、使用步骤

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值