asp.net webform 中使用Microsoft ASP.NET Web Optimization壓縮js及css

最後更新：2016-09-19 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：

使用靜態資源壓縮可以合并靜態資源檔案減少用戶端請求數量，壓縮檔大小，減少網路流量的損耗

需要用到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 red3 }

style1.css

1 input {2 color:red3 }

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/

asp.net webform 中使用Microsoft ASP.NET Web Optimization壓縮js及css

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More