博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
用SquishIt最小化Css与Javascript文件
阅读量:5286 次
发布时间:2019-06-14

本文共 2580 字,大约阅读时间需要 8 分钟。

       是一个轻易压缩与合并CSS与JavaScript文件的组件。同时它还使用处理css. 它依赖组件是:

Dependencies

Id

Version Range

(≥ 1.7.0.0)

(≥ 1.2.2.0)

(≥ 4.46.4422.26284)

(≥ 2.1.1)

 

不过不用担心,依赖会自动安装的,你可以使用Command-Line安装它。

PM> Install-Package SquishIt -Version 0.8.6

使用起来也很方便。修改web.config其中 debug 为 false

在Asp.net MVC 3 中的View 可以这么用,最后将生成一个合并前所以有JS的名为combine开头的文件。
@Html.Raw(Bundle.JavaScript().Add("~/Scripts/jquery-1.5.1.js").Add("~/Scripts/jquery.validate.js").Add("~/Scripts/jquery.validate.unobtrusive.js")        .Render("~/Scripts/combined#.js"))

通过FireBug可以看到只有一个Js的请求,这个文件合并了其它文件。

对比之前需要3个js的请求,现在只需要一个了,并且还压缩过。
CSS文件可以这样:

@Html.Raw(Bundle.Css()      .Add("~/Content/Site.css")      .Add("~/Content/RiskSite.css")  .Render("~/Content/combined#.css"))

 

最后页面只请求  

同样这个文件是合并了其它css文件,并压缩了它们。

如果想避免生成这些文件在磁盘上,让它们运行时生成。 以CSS为例,需要做一些扩展。官方已经开始做了,以后会有的。

需要在Global.asax中:

protected void Application_Start()    {        AreaRegistration.RegisterAllAreas();        RegisterGlobalFilters(GlobalFilters.Filters);        RegisterRoutes(RouteTable.Routes);        Bundle.Css()    .Add("~/Content/Site.css")    .Add("~/Content/RiskSite.css").AsCached("main","~/Security/Css/main");    }
然后在新建一个BaseController,增加两个Action,类似这样:
public class BaseController : Controller{    public ActionResult Js(string id)    {        // Set max-age to a year from now        Response.Cache.SetMaxAge(TimeSpan.FromDays(365));        // In release, the cache breaker is appended, so always return 304 Not Modified        Response.StatusCode = 304;        return Content(Bundle.JavaScript().RenderCached(id), "text/javascript");    }    public ActionResult Css(string id)    {        // Set max-age to a year from now        Response.Cache.SetMaxAge(TimeSpan.FromDays(365));        // In release, the cache breaker is appended, so always return 304 Not Modified        Response.StatusCode = 304;        return Content(Bundle.Css().RenderCached(id), "text/css");    }}
在实际Controller继承这个BaseController:
 
public class SecurityController : BaseController {    //...}
接下来在View中,MvcRenderCachedAssetTag方法在SquishIt.Mvc.dll里, 改写为:
 
@Bundle.Css().MvcRenderCachedAssetTag("main")

有兴趣还可写一个Razor扩展,类似的代码像这样

//Rzr.cshtml

@helper Css(string key) {  @Bundle.Css().MvcRenderCachedAssetTag(key)}@helper Js(string key) {  @Bundle.Javascript().MvcRenderCachedAssetTag(key)}// In a view...@Rzr.Css("main")@Rzr.Js("main")

 

完了,然后运行页面:

 
 
在Html中,显示:
这是一个动态生成的Css,完了,就这么简单。您可根据自己的情况修改组件。
希望对您Web开发有帮助。您可以感兴趣的文章:
 
   

作者:
出处:
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
该文章也同时发布在我的独立博客中-。

转载于:https://www.cnblogs.com/wintersun/archive/2012/05/29/2524092.html

你可能感兴趣的文章
tensorflow saver简介+Demo with linear-model
查看>>
Luogu_4103 [HEOI2014]大工程
查看>>
Oracle——SQL基础
查看>>
项目置顶随笔
查看>>
Redis的安装与使用
查看>>
P1970 花匠
查看>>
NOIP2016提高A组五校联考2总结
查看>>
iOS 项目的编译速度提高
查看>>
table中checkbox选择多行
查看>>
Magento开发文档(三):Magento控制器
查看>>
性能调优攻略
查看>>
ie6解决png图片透明问题
查看>>
瞬间的永恒
查看>>
2019-8-5 考试总结
查看>>
JS中实现字符串和数组的相互转化
查看>>
web service和ejb的区别
查看>>
Windows Azure Cloud Service (29) 在Windows Azure发送邮件(下)
查看>>
微信上传素材返回 '{"errcode":41005,"errmsg":"media data missing"}',php5.6返回
查看>>
div或者p标签单行和多行超出显示省略号
查看>>
Elasticsearch 滚动重启 必读
查看>>