快捷導(dǎo)航

Asp.net MVC下使用Bundle合并、壓縮js與css文件詳解

更新時(shí)間：2017年03月09日 09:36:30 作者：wolfy

在web優(yōu)化中有一種手段，壓縮js，css文件，減少文件大小，合并js，css文件減少請求次數(shù)。asp.net mvc中為我們提供一種使用c#代碼壓縮合并js和css這類靜態(tài)文件的方法。這篇文章主要介紹了在Asp.net MVC下使用Bundle合并、壓縮js與css文件的方法,需要的朋友可以參考下。

前言

介紹本文的正式內(nèi)容之前先引用《淘寶技術(shù)這十年》中一段話，對Web前端稍微有點(diǎn)常識的人都應(yīng)該知道，瀏覽器下一步會加載頁面中用到的CSS、JS（JavaScript）、圖片等樣式、腳本和資源文件。但是可能相對較少的人才會知道，你的瀏覽器在同一個(gè)域名下并發(fā)加載的資源數(shù)量是有限的，例如IE 6和IE 7是兩個(gè)，IE 8是6個(gè)，chrome各版本不大一樣，一般是4～6個(gè)。Bundle是ASP.NET 4.5中的一個(gè)新特性，可用來將js和css進(jìn)行壓縮（多個(gè)文件可以打包成一個(gè)文件，也可以說是合并多個(gè)文件），并且可以區(qū)分調(diào)試和非調(diào)試，在調(diào)試時(shí)不進(jìn)行壓縮，以原始方式顯示出來，以方便查找問題。下面話不多說，來看看詳細(xì)的介紹吧。

一個(gè)例子

新建asp.net mvc項(xiàng)目，在App_Start文件夾中你可以看到一個(gè)叫做BundleConfig.cs的類，

該類內(nèi)容如下：

public class BundleConfig
 {
 // For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
 public static void RegisterBundles(BundleCollection bundles)
 {
 bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
  "~/Scripts/jquery-{version}.js"));

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

 // Use the development version of Modernizr to develop with and learn from. Then, when you're
 // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
 bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
  "~/Scripts/modernizr-*"));

 bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
  "~/Scripts/bootstrap.js",
  "~/Scripts/respond.js"));

 bundles.Add(new StyleBundle("~/Content/css").Include(
  "~/Content/bootstrap.css",
  "~/Content/site.css"));
 }
 }

如上代碼所示，壓縮和合并分兩種對象ScriptBundle和StyleBundle。

namespace System.Web.Optimization
{
 //
 // Summary:
 // Represents a bundle that does Js Minification.
 public class ScriptBundle : Bundle
 {
 //
 // Summary:
 // Initializes a new instance of the System.Web.Optimization.ScriptBundle class
 // that takes a virtual path for the bundle.
 //
 // Parameters:
 // virtualPath:
 // The virtual path for the bundle.
 public ScriptBundle(string virtualPath);
 //
 // Summary:
 // Initializes a new instance of the System.Web.Optimization.ScriptBundle class
 // that takes virtual path and cdnPath for the bundle.
 //
 // Parameters:
 // virtualPath:
 // The virtual path for the bundle.
 //
 // cdnPath:
 // The path of a Content Delivery Network (CDN).
 public ScriptBundle(string virtualPath, string cdnPath);
 }
}

ScriptBundle有兩個(gè)構(gòu)造函數(shù)，virtualPath：js文件的虛擬路徑，cdnPath：js的網(wǎng)絡(luò)cdn路徑。StyleBundle的構(gòu)造函數(shù)的參數(shù)與ScriptBundle相同。

在上面的代碼片段中你可以看到