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


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

    注:只有通过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作为测试

    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/

    http://www.asp.net/mvc/overview/performance/bundling-and-minification

  • 相关阅读:
    KBEngine源码:EntityCall
    skynet 学习笔记-sproto模块(2)
    mongodb:为什么用mongodb
    编写高效服务器程序,需要考虑的因素
    b+树
    mysql:架构
    超越函数/微分方程 /积分中的技术/级数
    积分从入门到放弃<2>
    PyQt4 / PyQt5
    图形学算法:
  • 原文地址:https://www.cnblogs.com/weiweictgu/p/5883874.html
Copyright © 2020-2023  润新知