ASP.NET 4.0 Webform传统开发模式下如何压缩css, js
2013-03-29 15:19
691 查看
网上查了很多压缩css/js的方法,感觉还是用ms自己的简便,其他的虽然功能强大,但是比较复杂,要简单化...
在ASP.NET MVC中新建一个Web工程后,那些Bundle功能已经写在代码中了,但是传统的webform工程中怎样使用这个Bundle压缩功能呢?实现步骤如下:
1. 新建工程,并且为了演示,我把工程初始化成如下结构
2. 通过NuGet安装扩展"Microsoft ASP.NET Web Optimization Framework"
寻找到“Microsoft ASP.NET Web Optimization Framework”的扩展
安装此扩展,关闭此窗口
此时,解决方案中,会多出一个叫"System.Web.Optimization"的引用
3. 修改Global文件,加入Bundle资源的代码
上面分别定义了ScriptBundle和StyleBundle,分别是定义js和css资源的,每行的代码中,前面的路径是个虚拟路径,必须"~/"开头,后面的路径是真实路径。
4. 增加test.aspx页面
上面3行代码中,ResolveBundleUrl中的参数就是在Global中写的虚拟路径
5. 运行效果
运行后的html代码:
jQuery文件压缩后真正传输到客户端的样子如下(参数都已经被替换成一个字符了,空格等也删除了):
6. 有个不方便的地方就是调试不方便,假如要调试js就非常不方便,因为js被压缩了,所以需要换个方法来实现,如下
在test.aspx文件中,用下面的代码替换刚才那些代码
然后更改web.config参数,debug为false:
运行,也能实现压缩js和css的目的,当我们需要调试js, css时,把配置修改成这样compilation debug="true",就不会压缩js和css了,很方便
压缩前后对比
未解决的问题,相应的注意事项
压缩后的虚拟路径,css中的相应图片引用会导致问题,除了手工改动外,还不知道怎么自动的来解决(指在使用MS Bundle技术的情况下)。
在ASP.NET MVC中新建一个Web工程后,那些Bundle功能已经写在代码中了,但是传统的webform工程中怎样使用这个Bundle压缩功能呢?实现步骤如下:
1. 新建工程,并且为了演示,我把工程初始化成如下结构
2. 通过NuGet安装扩展"Microsoft ASP.NET Web Optimization Framework"
寻找到“Microsoft ASP.NET Web Optimization Framework”的扩展
安装此扩展,关闭此窗口
此时,解决方案中,会多出一个叫"System.Web.Optimization"的引用
3. 修改Global文件,加入Bundle资源的代码
void Application_Start(object sender, EventArgs e) { // 在应用程序启动时运行的代码 BundleTable.Bundles.Add(new ScriptBundle("~/resource/jquery").Include("~/Scripts/jquery-1.4.1.js")); //1个虚拟路径对应了1个js文件 BundleTable.Bundles.Add(new StyleBundle("~/resource/site").Include("~/Styles/Site.css")); //1个虚拟路径对应了1个css文件 BundleTable.Bundles.Add(new StyleBundle("~/resource/easyUITheme_default").IncludeDirectory("~/Styles/EasyuiThemes/default", "*.css", false)); //1个虚拟路径对应了多个css文件 BundleTable.Bundles.Add(new StyleBundle("~/resource/easyUITheme_gray").IncludeDirectory("~/Styles/EasyuiThemes/gray", "*.css", false)); //1个虚拟路径对应了多个css文件 BundleTable.Bundles.Add(new StyleBundle("~/resource/easyUITheme_metro").IncludeDirectory("~/Styles/EasyuiThemes/metro", "*.css", false)); //1个虚拟路径对应了多个css文件 }
上面分别定义了ScriptBundle和StyleBundle,分别是定义js和css资源的,每行的代码中,前面的路径是个虚拟路径,必须"~/"开头,后面的路径是真实路径。
4. 增加test.aspx页面
<script language="javascript" type="text/javascript" src="<%: System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/resource/jquery")%>"></script> <link href="<%: System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/resource/site")%>" rel="stylesheet" type="text/css" /> <link href="<%: System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/resource/easyUITheme_default")%>" rel="stylesheet" type="text/css" />
上面3行代码中,ResolveBundleUrl中的参数就是在Global中写的虚拟路径
5. 运行效果
运行后的html代码:
<script language="javascript" type="text/javascript" src="/resource/jquery?v=Uhq_EnoqEUkRtNpKy2esjMsMXymBWYnOuOXfeQL60QE1"></script> <link href="/resource/site?v=FL58Z5KGNr5NRUTNQUr7njMc88BYdCiwMZKbAGeiiUE1" rel="stylesheet" type="text/css" /> <link href="/resource/easyUITheme_default?v=X93-Lv0WiNBjfikEUpcvXzoKPbscp6dDibQHhy9TV4I1" rel="stylesheet" type="text/css" />
jQuery文件压缩后真正传输到客户端的样子如下(参数都已经被替换成一个字符了,空格等也删除了):
(function(n,t){function yi(){if(!i.isReady){try{r.documentElement.doScroll("left")}catch(n){setTimeout(yi,1);return}i.ready()}}function ki(n,t){t.src?i.ajax({url:t.src,async:!1,dataType:"script"}):i.globalEval(t.text||t.textContent||t.innerHTML||""),
6. 有个不方便的地方就是调试不方便,假如要调试js就非常不方便,因为js被压缩了,所以需要换个方法来实现,如下
在test.aspx文件中,用下面的代码替换刚才那些代码
<%:System.Web.Optimization.Scripts.Render("~/resource/jquery")%> <%:System.Web.Optimization.Styles.Render("~/resource/site")%> <%:System.Web.Optimization.Styles.Render("~/resource/easyUITheme_default")%>
然后更改web.config参数,debug为false:
<compilation debug="false" targetFramework="4.0" />
运行,也能实现压缩js和css的目的,当我们需要调试js, css时,把配置修改成这样compilation debug="true",就不会压缩js和css了,很方便
压缩前后对比
未解决的问题,相应的注意事项
压缩后的虚拟路径,css中的相应图片引用会导致问题,除了手工改动外,还不知道怎么自动的来解决(指在使用MS Bundle技术的情况下)。
相关文章推荐
- ASP.NET 4.0 Webform传统开发模式下如何压缩css, js
- ASP.NET 4.0 Webform传统开发模式下如何压缩css, js
- 【转载】Yui.Compressor高性能ASP.NET开发:自动压缩CSS、JS
- 高性能ASP.NET开发:自动压缩CSS、JS
- Yui.Compressor高性能ASP.NET开发:自动压缩CSS、JS防止Lambda的各种坑爹(一)
- ASP.NET 4.0 Webform Bundles 压缩css, js,为什么放到服务器不行
- Yui.Compressor高性能ASP.NET开发:自动压缩CSS、JS
- 在ASP.NET WEBFORM项目中使用MVC4中的BundleConfig捆绑压缩JS和CSS
- 项目开发中的一些注意事项以及技巧总结 基于Repository模式设计项目架构—你可以参考的项目架构设计 Asp.Net Core中使用RSA加密 EF Core中的多对多映射如何实现? asp.net core下的如何给网站做安全设置 获取服务端https证书 Js异常捕获
- ASP.NET MVC 4 RC的JS/CSS打包压缩功能
- Asp.Net使用Yahoo.Yui.Compressor.dll压缩Js|Css
- Asp.net中Js、Css文件压缩辅助类
- 如何封装JS和CSS文件封装为服务器端控件---ASP.NET 2.0
- ASP.NET MVC 4 RC的JS/CSS打包压缩功能
- 如何封装JS和CSS文件为服务器端控件---ASP.NET 2.0
- 【转】在ASP.NET MVC中,使用Bundle来打包压缩js和css
- 在ASP.NET MVC中,使用Bundle来打包压缩js和css
- 如何在asp.net页面使用css和js
- asp.net后台如何动态添加JS文件和css文件的引用
- 在ASP.NET MVC中,App_Start/BundleConfig.cs来打包压缩js和css