asp.net webform 中使用Microsoft ASP.NET Web Optimization压缩js及css

使用静态资源压缩可以合并静态资源文件减少客户端请求数量,压缩文件大小,减少网络流量的损耗

需要用到Microsoft ASP.NET Web Optimization,安装方法:

Install-Package Microsoft.AspNet.Web.Optimization

参考MVC构架的方法,App_Start中添加BundleConfig.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Optimization;

namespace EmptyWebForm
{
    public class BundleConfig
    {
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                        "~/Scripts/jquery-ui-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.unobtrusive*",
                        "~/Scripts/jquery.validate*"));

            bundles.Add(new ScriptBundle("~/bundles/WebFormsJs").Include(
                  "~/Scripts/WebForms/WebForms.js",
                  "~/Scripts/WebForms/WebUIValidation.js",
                  "~/Scripts/WebForms/MenuStandards.js",
                  "~/Scripts/WebForms/Focus.js",
                  "~/Scripts/WebForms/GridView.js",
                  "~/Scripts/WebForms/DetailsView.js",
                  "~/Scripts/WebForms/TreeView.js",
                  "~/Scripts/WebForms/WebParts.js"));

            bundles.Add(new ScriptBundle("~/bundles/MsAjaxJs").Include(
                "~/Scripts/WebForms/MsAjax/MicrosoftAjax.js",
                "~/Scripts/WebForms/MsAjax/MicrosoftAjaxApplicationServices.js",
                "~/Scripts/WebForms/MsAjax/MicrosoftAjaxTimer.js",
                "~/Scripts/WebForms/MsAjax/MicrosoftAjaxWebForms.js"));

            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                "~/Scripts/modernizr-*"));

            bundles.Add(new StyleBundle("~/bundles/themes/base/style").Include("~/Content/themes/base/style*"));

        }
    }
}

在themes下添加style1.css与style2.css作为测试

1 body {
2 border:solid 1px red
3 }

style1.css

1 input {
2 color:red
3 }

style2.css

修改页面应用css及js方法如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="EmptyWebForm.Index" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <%:System.Web.Optimization.Scripts.Render("~/bundles/jquery") %>

    <%:System.Web.Optimization.Scripts.Render("~/bundles/WebFormsJs")%>

    <%:System.Web.Optimization.Styles.Render("~/bundles/themes/base/style")%>

</head>
<body>
    <form id="form1" runat="server">
    <div>

    </div>
    </form>
</body>
</html>

页面请求结果中,根据配置会自动合并压缩文件,详细如下:

css压缩效果如下,两个样式表文件被合并为一个并且进行了压缩

参考:

https://blogs.msdn.microsoft.com/rickandy/2012/08/14/adding-bundling-and-minification-to-web-forms/

时间: 2024-10-03 23:11:11

asp.net webform 中使用Microsoft ASP.NET Web Optimization压缩js及css的相关文章

【Ext.Net学习笔记】01:在ASP.NET WebForm中使用Ext.Net

Ext.NET是基于跨浏览器的ExtJS库和.NET Framework的一套支持ASP.NET AJAX的开源Web控件,包含有丰富的Ajax运用,其前身是Coolite. 下载地址:http://www.ext.net/download/示例地址:http://examples.ext.net/ 1.首先下载Ext.Net,地址:http://www.ext.net/download/ ,有两种框架选择,选择下载WebForms 当前版本是2.5.1,压缩包里面包含了不同版本,分别用在相应.

【转】在ASP.NET MVC中,使用Bundle来打包压缩js和css

在ASP.NET MVC4中(在WebForm中应该也有),有一个叫做Bundle的东西,它用来将js和css进行压缩(多个文件可以打包成一个文件),并且可以区分调试和非调试,在调试时不进行压缩,以原始方式显示出来,以方便查找问题. 具体优势可自行百度或参看官方介绍:http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification 这里仅简单记录下如何使用. 首先,如果是使用的ASP.NET MVC4基本或者其他内容更丰富的模板,B

在ASP.NET MVC中,使用Bundle来打包压缩js和css(转)

转自:http://www.cnblogs.com/xwgli/p/3296809.html 在ASP.NET MVC4中(在WebForm中应该也有),有一个叫做Bundle的东西,它用来将js和css进行压缩(多个文件可以打包成一个文件),并且可以区分调试和非调试,在调试时不进行压缩,以原始方式显示出来,以方便查找问题. 具体优势可自行百度或参看官方介绍:http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification 这里仅简

[转载]在ASP.NET MVC中,使用Bundle来打包压缩js和css

在ASP.NET MVC4中(在WebForm中应该也有),有一个叫做Bundle的东西,它用来将js和css进行压缩(多个文件可以打包成一个文件),并且可以区分调试和非调试,在调试时不进行压缩,以原始方式显示出来,以方便查找问题. 具体优势可自行百度或参看官方介绍:http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification 这里仅简单记录下如何使用. 首先,如果是使用的ASP.NET MVC4基本或者其他内容更丰富的模板,B

在ASP.NET MVC中,使用Bundle来打包压缩js和css

在ASP.NET MVC4中(在WebForm中应该也有),有一个叫做Bundle的东西,它用来将js和css进行压缩(多个文件可以打包成一个文件),并且可以区分调试和非调试,在调试时不进行压缩,以原始方式显示出来,以方便查找问题. 具体优势可自行百度或参看官方介绍:http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification 这里仅简单记录下如何使用. 首先,如果是使用的ASP.NET MVC4基本或者其他内容更丰富的模板,B

Ext.Net学习笔记01:在ASP.NET WebForm中使用Ext.Net

Ext.Net是一个对ExtJS进行封装了的.net控件库,可以在ASP.NET WebForm和MVC中使用.从今天开始记录我的学习笔记,这是第一篇,今天学习了如何在WebForm中使用Ext.Net控件库. 下载Ext.Net 首先要去Ext.Net网站上下载Ext.Net,我先学习的是WebForm版: 当前版本是3.1.0,压缩包里面包含了不同版本,分别用在相应.net版本的程序中. 在项目中引用 要使用Ext.Net,首先创建一个WebForm程序,我们这里使用4.5版. 在引用管理器

ASP.NET WebForm中JavaScript修改了页面上Label的值,如何在后台代码中获取

在用ASP.NET WebForm开发一个项目时,遇到如下的一个情况 页面上有一个Textbox控件,还有2个Label 控件. 当Textbox控件中的值更改时,两个Label控件上的值做相应的更改, 这一点是通过页面中嵌入的JavaScript来实现的. 但是,Label控件上的值更改后,在后端.cs代码中,通过Label.Text 并不能取到更改后的值. order.aspx页面代码如下: <%@ Page Language="C#" AutoEventWireup=&qu

ASP.NET WebForm中前台代码如何绑定后台变量

转载自 http://www.cnblogs.com/lerit/archive/2010/10/22/1858007.html 经常会碰到在前台代码中要使用(或绑定)后台代码中变量值的问题.一般有<%= str%>和<%# str %>两种方式,这里简单总结一下.如有错误或异议之处,敬请各位指教. 一方面,这里所讲的前台即通常的.aspx文件,后台指的是与aspx相关联的CodeBehind,文件后缀名为.aspx.cs:另一方面,这里的绑定是指用户发出访问某一页面指令后,服务器

ASP.NET WEBFORM 中导出数据,使用文件流的方式

效果图: 前台使用了gridview控件: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="E_CKBB.aspx.cs" Inherits="DRP.sales.E_CKBB" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht