2012年2月26日

ASP.NET MVC - ASP.NET MVC 4 Bundling and Minification

2012/11/18 更新 - 這篇文章內容是舊版本,但概念上是相同的,大家也可以去黑暗大的這篇文章觀看,新舊的差異,主要是設定的方法有點不一樣。

從ASP.NET MVC或是ASP.NET的未來走向來看,我們可以看到,越來越多的功能,其實目的都是為了Mobile平台上的開發,當然,這塊也不是啥未來願景了,而是已經在發生的現在進行式;無論是朋友,同事,我想大家手機一拿出來,大概不外乎就是iPhone、Android、Win Phone,如果朋友拿出來的不是智慧手機,大概還會被大家噓一番XDD。

Bundling and Minification ( 綑綁與微小!? XD )

這個新的ASP.NET MVC 4 和 ASP.NET 4.5的新功能,也是為了Mobile而來,簡單的說,就是因為現在大家都用手機上網,看網站,但是好死不死,無線3G的頻寬又只有那麼一丁點,如果要下載許多資料頁面,就又卡在那邊,所以這次推出了這個新技術。

JavaScript & CSS

JavaScript和CSS已經可以說是網頁三巨頭的兩魔頭了,早期可能也只有CSS,但是,現在JavaScript和CSS再加上HTML,大概已經無法分離了;基本上,網頁的下載,HTML還好,因為不管怎樣,一個頁面,只會要求一次,但是JavaScript和CSS,可能就會因為設計得太好,切分得太漂亮,所以瀏覽器會和Server要求很多次( 因為有許多的JavaScript和CSS要下載 ),至於我,大概就沒有這種困擾吧XDDD,因為我都塞在同一個檔案阿!! ( 這是不好的行為喔 )

例如下面這段,我們要載入一堆的JavaScript。

<script src="@Url.Content("~/Scripts/jquery-1.6.2.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/_references.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/AjaxLogin.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/knockout-2.0.0.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/modernizr-2.0.6-development-only.js")" type="text/javascript"></script>

這樣可能就會消耗掉463KB的頻寬

image

Bundling

Bundling這個新功能,他主要的目的,是希望可以把這些一次又一次的請求結合起來,變成只發送一次的請求,並且一次把所有的JavaScript ( or CSS )包回來,所以瀏覽器就少了很多次的要求,並且降低了傳輸的時間,所以的確有符合綑綁的意味喔!!

Minification

微小,我想大家應該也猜到了,就是縮小檔案;原理是將JavaScript的空白、註解、和不需要的文字給移除掉,以利檔案的傳輸,因為檔案大小更小了!

例如這一個超級簡單到爆炸的JavaScript

//Test
function Test() {
    alert("Test");
}

如果正常的情況下,我們可以看到在瀏覽器的偵錯模式下,顯示的是這樣。

image

但如果打開Minification,就會變成這樣,註解、和空白都不見了。

image

結果!

如果我們開啟Bundling and Minification,則只會消耗326KB。( 嗯,圖有點小,請見諒=w= )。

image

而根據官方說法,Bundling and Minification分別可以有20%和40%的提升,在某些網路不好的地方( 例如說台灣的行動上網 ),這可以大大的提高使用者開啟網頁的處理速度,當然,這部份也有一些小缺點和優點,缺點我想大家都很清楚,有時開發網頁的時候,會去用瀏覽器的除錯工具去看,有沒有哪些CSS、或是JavaScript沒被載下來,或是哪些是不需要載下來的,但如果全部Bundling,就沒辦法看到了QQ,其次,我想最頭痛的就是除錯;這樣沒註解沒空白的JavaScript,可能會要人命吧;但反之,這說不定是個簡易的混淆器XDD,總之,如果有良好的開發環境與架構,我想,這些都不算是問題吧。

如何用勒!?

如前面所說,如果今天是要掛一堆JavaScript,我想原始的方法大家應該都知道了,而如果要啟動這個Bundling and Minification,則需要這樣做。

首先,在Gloab.asax檔案下面,要加入BundleTable.Bundles.EnableDefaultBundles();,如果原本有BundleTable.Bundles.RegisterTemplateBundles();請先註解掉。

protected void Application_Start()
{
    AreaRegistration.RegisterAllAreas();

    RegisterGlobalFilters(GlobalFilters.Filters);
    RegisterRoutes(RouteTable.Routes);
    BundleTable.Bundles.EnableDefaultBundles();
    //BundleTable.Bundles.RegisterTemplateBundles();
}

( 這裡查到說BundleTable.Bundles.RegisterTemplateBundles();是預設樣板用的,所以也沒辦法改變目錄位置,所以網路上,人家說要改用BundleTable.Bundles.EnableDefaultBundles();至於是不是Bug,這部分可能也還要看原始碼,或是等正式版出了的時候,再做確定。 )

接下來,只要在原本的位址上,加上這兩行,就可以了;但要注意一下,下面的Url目錄的地方(例如~/Content/css),並非是Content底下css目錄。而是代表著Content底下的所有css檔案,同樣的,Script/js,也是代表著Script底下的js檔案,這個部分要注意一下。

<link href="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Content/css")" rel="stylesheet" type="text/css" />
<script src="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Scripts/js")"></script>

所以當Server看到這行,ASP.NET就會掃描目錄,並且Bundling and Minification。並且回覆給瀏覽器單一的響應,我們也不需要特別處理怎樣的步驟,也通通相容瀏覽器。

順序

基本上,包起來的JavaScript,會依據英文字母的順序包裝,或許大家第一個想到的就是,那如果有一個a.js,裡面用到jQuery.js,不就一定會錯了嗎?還好,雖然會依據英文字母順序,但如果是著名的Library,系統會自動幫忙排序,也就是說,他一定會把jQuery.js放到第一個,然後才會是a.js。

至於css的順序,其實也是一樣,像是著名的歸零css,reset.css,也會排在第一個。( 就是會把div等等標籤的margin、padding先預設為零的css )。

當然,這個順序也可以自訂。

終了

最後,這篇文章的內容是我邊看ScottGu大神的Blog,邊翻的,有興趣的也可以直接參考底下的參考連結;而這個機制,就如小弟我一開始說的,未來Mobile已經非常明確,而Mobile的資源有限,所以各大廠也提供許多的方法來支援,但不管怎樣,有用多的工具,有越多的彈性,總是好的,也希望這篇文章能帶來一些幫助。

參考資料

2012年2月25日

ASP.NET MVC - 安裝ASP.NET MVC 4

很不幸的..ASP.NET MVC 4 Beta出來了…,為啥不幸呢…因為剛好在小弟最忙的這段時間出來,根本沒時間研究看看阿QQ…不過既然出來,還是忍不住稍微來試試看有啥新功能 ( 老闆,對不起啦XDD,讓小弟偷閒一下吧 )。

其實這次ASP.NET MVC 4 Beta又推出許多的強大的功能,不過在玩之前,我們總還是要先把ASP.NET MVC 4 Beta裝起來吧,既然都在裝了,那就順便紀錄一下過程吧。

安裝注意事項

官網這邊有幾個安裝注意事項要注意。

  1. 必須先移除任何的ASP.NET MVC 4 版本,才可以安裝ASP.NET MVC 4 Beta。
  2. ASP.NET MVC 4 Beta 並不相容於.NET Framework 4.5 Developer Preview版本,所以必須先移除.NET Framework 4.5 Developer Preview版本,才能安裝ASP.NET MVC 4 Beta。
  3. ASP.NET MVC 4可以與ASP.NET MVC 3相容,請安心服用。
  4. ASP.NET MVC 4必須安裝在Visual Studio 2010 Service Pack 1 或是 Visual Web Developer Express 2010 Service Pack 1,而且Visual Studio會需要PowerShell 2.0。

最後,我們可以從 ASP.NET MVC 4 home page 使用Web Platform Installer來快速安裝,或是直接開Web Platform來安裝。 

( 不知道Web Platform的人,可以參考這篇 )

 

安裝ASP.NET MVC

打開Web Platform後,我們就可以找到ASP.NET MVC 4的選項,然後按下Add,在按下Install,就可以順利安裝了=w=,安裝完後,就可以開心地進入ASP.NET MVC 4的世界了!

02/25補充,剛剛被我朋友罵,說使用Web Platform後就完全不動了XD,但我裝是可以的阿QQ,所以這邊請大家注意一下,建議使用Web Platform安裝的時候,不要開其他程式,例如:IE、Firefox、MSN、Visual Studio,就給他好好地安裝,去喝個茶,休息一下打個電動吧XDD,如果真的不行,也可以直接下載安裝檔。另外,雖然小小的檔案,不過真的會安裝很久= =。

image

 

安裝完後,就可以看到ASP.NET MVC 4了。

image

參考網址

2012年2月16日

Visual Studio - Visual Studio Achievements

最近因為趕工趕到快死掉,所以完全沒辦法寫一些文章,我朋友說,我這裡大概都長一堆雜草了吧,所以今天就來po一篇小品。

Visual Studio Achievements這個東西其實很好玩,有打過電動的,大概都知道,啥獎盃系統、成就系統,而這個東西,就是寫程式人的成就XDD,其實小弟我,之前就想要裝了,但時間一直再忙,所以一直沒機會給他裝下去,今天,寫完程式之餘,就順便玩一下吧。

首先,這個東西要使用Visual Studio裡面的擴充管理員來安裝,當然,裝完後會重新啟動Visual Studio。

image

啟動完後,就會出現,要我們登入的畫面,按一下登入吧 ( 如果沒註冊過也沒關係,晚一點他就會要你註冊了=w= )。

image

然後會出現讓人熟悉的登入畫面!!

image

接下來,因為沒有註冊過,所以被要求輸入一個UserName。

image

這裡他問我們願不願意授權,既然都走到這邊了,當然要給他授權阿,選Yes! Authorize this!

image

這樣就順利完成了,這時我們可以利用如下圖的位置,看看目前已經拿到幾個成就!

image

點開之後就可以看到一堆未完成的成就!目前小弟拿到兩個,一個是安裝完Visual Studio Achievements,另一個是裝超過五個擴充套件XDD

image

大致上就這樣,豋入官網後,我們也可以看到獲得的時間,名次排名,分享到FB等等功能,前輩的網站上也有許多精采的介紹,大家也可以去看看喔!

參考資料

2012年2月3日

第六次Study4點課幫 Developer Party 12-0212 技術學習分享 活動開始!!

2/16 更新 活動順利結束!

這次很感謝Laura&CCH還有Shawn熱情的講課,分享了許多外面比較少見的知識分享,也讓我們聽的津津有味;而它們上台分享,也代表著一個意味,未來我們會找更多不同領域的人,來分享不同的主題,來讓大家接觸更多更不同的東西,而大家不畏懼的分享自己的專長,這也是我們Study4的宗旨,也希望我們能進入不一樣的里程碑!各位加油嚕!

第一場討論的是iPhone開發,探討的是當新手第一次開始時,會遇到的種種問題,此外,開發iOS 5,也和外面的書籍內容有許多不一樣的地方,這部份很感謝講師們幫忙整理,並給大家一個不錯的概念。

第二場討論的是.NET資料存取技術,ADO.NET、LINQ2SQL、EF的效能比較與實作範例,這是講師自行花了許多時間研究出來的結果與數據,很感謝Shawn在這邊與我們分享,我相信大家聽完後,現在應該很清楚知道,該用怎樣的技術去處理。

最後,還是謝謝各位!

-- 我是舊資訊分隔線 --

大家新年快樂,小弟我也在這裡拜個晚年,不知道大家過年這段時間有沒有來寫寫Code呢!?

第六次活動展開!

這次是第六次的Study4點課幫活動,新的一年,新的講師來和大家分享主題,未來也會越來越多元化的一個發展,請大家拭目以待!

這次主題涵蓋兩個範圍,第一個是大家討論非常熱烈的iPhone開發,講師們很熱心地告訴大家,怎樣才能從完全不會的狀況下入門,該注意哪些東西,而這次不光光只是寫個HelloWorld,更有精闢的Objective-C語法和XCode的介紹喔!,相信大家學完後,對於iPhone App的開發,就更容易上手了!

第二場次在介紹.NET資料存取技術效能與效能分析,從早期的ADO.NET到現在的Linq2SQL、Entity Framework,到底該怎樣選擇,效能方面的優劣,又該如何使用,講師會在這一場做一個全盤的分析與比較,這也是難得一見的好主題喔!

Study4 點課幫 Developer Party 12-0212 技術學習分享

( 免費入場 )

時間 : 2012 02/12 (日) 12:30 進場,13:00 ~ 17:00
地點 : 台中市西區民權路239號17樓
課程大綱:

  1. iPhone APP 入門學習經驗分享 – Laura & CCH.
  2. .NET資料存取技術效能分析 – Shawn

檢視較大的地圖