在錯誤中學習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也可以長得精簡一點。
留言
張貼留言