使用System.Web.Optimization对CSS和JS文件合并压缩

在ASP.NET MVC 中JS/CSS文件动态合并及压缩通过调用System.Web.Optimization定义的类ScriptBundle及StyleBundle来实现。

大致步骤如下:

1.App_Start添加:

    public class BundleConfig {
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new StyleBundle("~/Themes/Homecss").Include("~/Themes/css/common.css"));
            bundles.Add(new ScriptBundle("~/Scripts/Homejs").Include("~/Scripts/jquery-1.8.0.min.js", "~/Scripts/showTips.js", "~/Scripts/Login.js"));
        }
    }

注意:~/Themes/Homecss/~/Scripts/Homejs 当作别名来使用

2.web.config添加:

      <add namespace="System.Web.Optimization"/>

3.视图页面调用方式:

    @Styles.Render("~/Themes/Homecss")
    @Scripts.Render("~/Scripts/Homejs")

最终的结果:

<link href="/Themes/Homecss?v=IIj_fSOB-OK2FfhX3UiRKFdTYwvN0Yx50JVEsmXZlVs1" rel="stylesheet"/>

    <script src="/Scripts/Homejs?v=Dvhz0uD08Tqd9t2yhnX1u3n5TcuZDD1zM_8Ckxz0nHY1"></script>

注意:VS调试的时候是不生效,只能把调试关闭或者发布才能看到效果

 <compilation debug="true" targetFramework="4.5" />

改成false 就可以看到效果了

记录下

使用System.Web.Optimization对CSS和JS文件合并压缩

时间: 2024-10-28 21:57:41

使用System.Web.Optimization对CSS和JS文件合并压缩的相关文章

CSS 和 JS 文件合并工具

写 CSS 和 JavaScript 的时候, 我们会遇到一个两难的局面: 要么将代码写在一个大文件, 要么将代码分成多个文件. 前者导致文件难以管理, 代码复用性差, 后者则因为需要在载入多个文件令页面性能下降. 我们期望可以将代码细分成多个模块, 而在使用的时候可以合而为一. 本文会介绍一个 CSS 和 JS 的合并工具, 对模块化的文件进行管理. CSS 和 JS 合并工具的发展 对于 CSS/JS 合并和压缩的问题, 有很多解决方案, 我所在的团队也经历了几个阶段. 网站刚刚搭建的时候,

System.Web.Optimization对脚本和样式表的压缩操作

1 是否允许样式表压缩 BundleTable.EnableOptimizations = true; 在MVC项目中的 BundleConfig操作中是微软已经给我们准备好的CSS和JS压缩,我们可以把模版页的样式表和脚本放入这个地方压缩(子页太多,所以另作压缩).这个配置文件在App_Start文件夹下,Global.asax在全局配置文件下,会启用这个配置文件,对EnableOptimizations设置后,可以允许压缩和不允许操作 1 bundles.Add(new StyleBundl

System.Web.Optimization 合并压缩技术的使用

捆绑和压缩原理是:将多个css文件动态合并和压缩为一个css文件.多个js文件动态合并和压缩为一个js文件,如此达到减少浏览器对服务器资源文件的请求数量.缩小资源文件的尺寸来提高页面反应速度的目的.ASP.NET 4.5及以上版本支持此技术(Optimization). 使用方法: 先下载包Microsoft.AspNet.Web.Optimization,然后配置做以下配置:  第一步:照惯例,在App_start文件夹下新建类,如图: 这里有个参数“BundleTable.EnableOpt

在ASP.NET Web Forms中用System.Web.Optimization取代SquishIt

将一个ASP.NET Web Forms项目从.NET Framework 4.0升级至.NET Framework 4.5之后,发现SquishIt竟然引发了HTTP Error 500.0 - Internal Server Error. SquishIt是一个开源的支持ASP.NET的js/css打包工具,项目地址:https://github.com/jetheredge/SquishIt,出生早于Microsoft ASP.NET Web Optimization Framework(

MVC5手工添加System.Web.Optimization

VS2012web手工添辑一个空的mvC5的项目,添加EF6的支持,在别的项目里复制了母版页_Layout.cshtml过来,发现Styles.Render未引用,这个引用使用的命名空间是System.Web.Optimization,直接在项目里添加是找不到的,如是在NuGet命令行添加Install-Package Microsoft.AspNet.Web.Optimization PM> Install-Package Microsoft.AspNet.Web.Optimization 正

System.Web.Optimization对脚本和样式表的操作

这个也是本章重点向描述的部分,首先我们可以使用VS2012RC来新建一个MVC4.0项目,版本可以为4.0或4.5.在Global.asax文件代码中,我们发现已经把过滤器,路由器,以及对样式表和脚本捆绑(Bundles)移到了其他页面,就是在根目录下的App_Start文件夹内.代码只是简简单单的几行,代码如下 using System; using System.Collections.Generic; using System.Configuration; using System.Dat

System.Web.Optimization找不到引用

在MVC4的开发中,如果创建的项目为空MVC项目,那么在App_Start目录下没有BundleConfig.cs项的内容,在手动添加时在整个库中都找不到:System.Web.Optimization命名空间.如下图所示, 那么如何找到System.Web.Optimization命名空间,完成BundleConfig.cs内容的添加.方法如下:打开程序包管理控制台,在控制台中输入: Install-Package Microsoft.AspNet.Web.Optimization按回车.在控

asp.net mvc4 System.Web.Optimization找不到引用

在MVC4的开发中,如果创建的项目为空MVC项目,那么在App_Start目录下没有BundleConfig.cs项的内容,在手动添加时在整个库中都找不到:System.Web.Optimization命名空间. 如何找到System.Web.Optimization命名空间,完成BundleConfig.cs内容的添加.方法如下:打开程序包管理控制台,在控制台中输入:Install-PackageMicrosoft.AspNet.Web.Optimization按回车. 在控制台中如果看到提示

MVC 中 System.Web.Optimization 找不到引用

在MVC4的开发中,如果创建的项目为空MVC项目,那么在App_Start目录下没有BundleConfig.cs项的内容,在手动添加时在整个库中都找不到:System.Web.Optimization命名空间 方法如下:打开程序包管理控制台,在控制台中输入:Install-PackageMicrosoft.AspNet.Web.Optimization按回车. 链接: http://blog.csdn.net/mymhj/article/details/37559661