kevinya

低調

2015-10-30

[ASP.NET MVC]@Styles.Render以及@Scripts.Render將include一堆css以及一堆js變簡單了，而且加快了行動版網頁的載入

  • 18689
  • 0
  • 2015-12-09

摘要:[ASP.NET MVC]@Styles.Render以及@Scripts.Render將include一堆css以及一堆js變簡單了

ps.補充20151209：

在vs2015中，已經移除bundleconfig這樣的支援囉，因此舊版的mvc專案（mvc5以及之前更舊的，在新版的vs2015都無法執行囉，除非安裝另外的套件來做相容），已經改用新的方式打包.js以及.css，建議還是採用最傳統的寫法，直接在網頁中include官方給的 .min.js或是.min.css比較妥當，才不會微軟官方一改，就變成無法執行。

在vs2013預設建立出來的asp.net mvc專案中，在template(~/Views/Shared/_Layout.cshtml)常會看到

@Styles.Render以及@Scripts.Render的寫法，主要是用來在網頁中一口氣include一堆css以及一堆javascript

因為現在網頁需要用到的函式庫越來越多，用這種寫法就不用在網頁上include一堆 .js以及.css，像是

<script type="text/javascript" src="第1個js.js"></script>
<script type="text/javascript" src="第2個js.js"></script>
..........................
...................
<script type="text/javascript" src="第100個js.js"></script>

 

舉例來說，_Layout.cshtml就會有這樣的內容：

@Style.Render(OOXX)就是將一堆相關的.css加入到網頁中，@Scripts.Render(OOXX)就是將一堆.js加入到網頁中


<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - 我的 ASP.NET 應用程式</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

</head>

但是在使用這種語法之前，需先到~/App_Start/BundleConfig.cs裡面做設定，

以下面的第一個bundles.add(OOXX)為例的話，就是將所有~/Scripts/資料夾裡面，所有版本的jquery-ooxx.js都加入一個bundle集合

並且把這個集合命名為~/bundles/jquery, 於是在.cshtml網頁中，如果想要include大量的jquery.js進來的話

只要寫一行程式碼@Scripts.Render("~/bundles/jquery")即可

程式碼是不是變的更簡潔了呢，除此之外，尚可在行動裝置的瀏覽器上節省流量以及增快載入的速度

因為微軟會將要加入到網頁的bundle集合做壓縮，檔案會比較小

用手機開網頁通常會比用電腦上慢一點點，人的耐心也會被磨掉了那麼一點點，行動網頁的檔案大小的載入時間是不是分秒必爭呢？...我想應該是喔

大概是這樣.....


public class BundleConfig
{
	// 如需「搭配」的詳細資訊，請瀏覽 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*"));

		// 使用開發版本的 Modernizr 進行開發並學習。然後，當您
		// 準備好實際執行時，請使用 http://modernizr.com 上的建置工具，只選擇您需要的測試。
		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"));
	}
}

 

參考文章：

ASP.NET MVC 4 RC的JS/CSS打包壓縮功能

http://blog.darkthread.net/post-2012-06-05-aspnet-mvc4-bundle-and-minify.aspx

[ASP.NET MVC] 建置高效能網站-壓縮你的 CSS 與 JS (Minify & Bundle)

http://www.dotblogs.com.tw/jasonyah/archive/2013/05/25/asp.net-mvc4-use-bundle-to-minify.aspx

標籤雲