MVC 4 多了什麼新東西 – Bundling and Minification

以往在加入靜態檔案例如說 Css & Scripts 的時候,都是針對一個一個檔案在 Html 中加入參考。等到專案需要上線的時候,再將 Css 或是 js 檔案整合成同一個,並且將檔案最小化來獲得更好的 Loading 速度。

Bundling and Minification

所以說為了讓這些工作可以更簡化,.NET 加入了這個功能,編輯的時候一樣是分開檔案編輯。在 MVC 3 我的作法是在 Layout 的部分加入如下的檔案。

<script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" 
type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.mobile-1.0.1.min.js")"
type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")"
type="text/javascript"></script>

能夠參考 minified 過都盡量參考 minified 過的檔案,可是也會造成在需要修改編輯的時候難以編輯,或著是利用 debug 判斷要參考的檔案。

image

可以看到這邊花的時間是 78+78+141 ms, 那在 mvc 4 提供的這個方法就是只要加入一行。

<script src="@Url.Content("~/Scripts/js")" type="text/javascript"></script>

這邊就會抓取 Scripts 資料夾底下的所有 .js 檔案,這是我的 Scripts 資料夾。

image

在這邊 mvc 4 會自動把 Scripts 裡面的 js 檔案整合成同一個(Bundling ),並且作 minified 的動作(Minificaton),從瀏覽器也可以看到,檔案確實已經整合而且 minified 過。

image

這邊檔案大小約等於原本的三個檔案相加(因為原本參考的是 .min 檔案),但是 loading 的速度反而增加了,因為 request 的數量降低了,進而提升檔案的回傳速度。

image

同樣的方法也適用在 css 上,並且支援 less css

image

  • Bundling and Minification 除了在 Mvc 4 中支援之外,.net framework 4.5 也會支援這種做法。
  • 目前還在 Beta 版本,經過實測會發現如果習慣邊測邊改 javascript 會遇到很大的不便,因為 .net 將 Bundling and Minification 的檔案暫存起來,造成修改過後效果沒有辦法在 browser 重新整理之後馬上顯示出來。
  • 如果是檔案加入需要有一定順序會比較麻煩,因為目前版本是由檔名排序加入。


bundling and minification support

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *