在錯誤中學習ASP.NET MVC 第 19 篇 - 認識View - 合併與最佳化CSS/JS檔案

 第15天說好要講的合併與最佳化,透過預設範本的Views/Shared/_Layout.cshtml來觀察一次使用方式





其中的@Styles與@Scripts是System.Web.Optimization組件中的靜態類別,在預設範本中已經自動安裝這個套件了,使用Render方法時必須傳入path,只是那個路徑到底是怎麼定義的呢,專案目錄下雖然有Content資料夾,但卻找不到css資料夾



這邊的"~/Content/css"路徑其實指的是專案目錄下App_Start/BundleConfig.cs中所定義的虛擬路徑



專案下的Global.asax在執行時會呼叫BundleConfig中的RegisterBundles方法



看到這邊可能會覺得幹嘛這麼麻煩阿!只是要加入下面兩行,要做一堆設定,誰想用啊

<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>

啟用合併與壓縮

預設合併與壓縮是關閉的,啟用的方式如下:

BundleTable.EnableOptimizations = true;


或將專案目錄下Web.config,debug=false



再檢視原始碼,疑!怎麼跟想像中的長得不一樣



點一下那串詭異的link,看到就是完全沒有空白的code,這就是壓縮的力量,Magic...,如果今天我想偷看別人的code打開是這個畫面,我應該就作罷了XD



再來講一下虛擬路徑的設定,一個路徑下是可以include多個檔案的



另外也可以使用 * 符號或 {version},讓bundle忽略某些條件

使用*號

代表忽略*號後面的檔名,例下圖為例,會找到4個符合條件的檔案,不過在啟用最佳化時會以載入.min.js檔案為優先



{version}

這個就是忽略檔案的版本資訊,這蠻方便的,不管jquery版本升級到多少,通通不需要再去修改code,不過要記得不要存放兩個版本的jquery,它會將符合條件的檔案通通載入



bundles.IgnoreList.Ignore("...")

排除某些檔案。

有時候公用版面在使用外部的CSS常常就超過10幾行,透過Bundle管理就可以輕鬆打包與管理,而且View也可以長得精簡一點。


留言

這個網誌中的熱門文章

CPE 一顆星選集題目說明與解答 - Java 筆記與心得分享

Visual Studio 自動排版格式化程式碼

1. Vito's family (CPE10406, UVA10041) - CPE一顆星解答與說明