Asp.netMVC中如何使用Bundle合并、壓縮js與css文-創(chuàng)新互聯(lián)

這篇文章主要介紹Asp.net MVC中如何使用Bundle合并、壓縮js與css文,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!

成都創(chuàng)新互聯(lián)公司從2013年成立,先為常山等服務(wù)建站,常山等地企業(yè),進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為常山企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

一個(gè)例子

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

Asp.net MVC中如何使用Bundle合并、壓縮js與css文

該類內(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相同。

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

  • jquery-{version}.js:其中version是jquery的版本號,version是一個(gè)版本號的占位符。

  • jquery.validate*:*通配符,匹配所有。

上面的代碼完成后,需要在Global.asax的Application_start事件中對其注冊。

Asp.net MVC中如何使用Bundle合并、壓縮js與css文

如何使用?

在視圖中,通過下面的代碼實(shí)現(xiàn)對靜態(tài)文件的引用。

Asp.net MVC中如何使用Bundle合并、壓縮js與css文

瀏覽

Asp.net MVC中如何使用Bundle合并、壓縮js與css文

怎么沒起作用呢?Bundle默認(rèn)在調(diào)試的情況下,是沒有開啟打包壓縮的,可以通過下面的2中方式進(jìn)行開啟。

Asp.net MVC中如何使用Bundle合并、壓縮js與css文

再瀏覽下

Asp.net MVC中如何使用Bundle合并、壓縮js與css文

你會發(fā)現(xiàn)Jquery-1.10.2.js該文件在請求中已經(jīng)不存在了,它已經(jīng)被打包壓縮在jquery?v=版本號,這個(gè)文件里面了。

另外一種打開打包壓縮的方式,在web.config文件中中:

Asp.net MVC中如何使用Bundle合并、壓縮js與css文

以上是“Asp.net MVC中如何使用Bundle合并、壓縮js與css文”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!

新聞名稱:Asp.netMVC中如何使用Bundle合并、壓縮js與css文-創(chuàng)新互聯(lián)
本文路徑:http://www.muchs.cn/article30/hgeso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供自適應(yīng)網(wǎng)站響應(yīng)式網(wǎng)站、網(wǎng)站設(shè)計(jì)公司、企業(yè)建站、營銷型網(wǎng)站建設(shè)、微信公眾號

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)

營銷型網(wǎng)站建設(shè)