您的位置：首页 > 编程语言 > ASP

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

2016-09-19 09:13 435 查看
使用静态资源压缩可以合并静态资源文件减少客户端请求数量，压缩文件大小，减少网络流量的损耗。

注：只有通过web.config关闭调试功能，压缩才会生效

<system.web>
<compilation debug="false" targetFramework="4.0" />


需要用到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作为测试

input {
color:red
}


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/

http://www.asp.net/mvc/overview/performance/bundling-and-minification
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航