1.0.0 to 1.1.0
Microsoft ASP.NET Web Optimization Framework 1.1.0-alpha1最快取得的方式是透過NuGet。此1.1.0版本除了修正一些Bug外，再提供三個功能，分別是「CDN fallback」、「Element template strings」、「Virtual Path Provider」。
ASP.NET MVC 4 - 合併與最佳化(bundling and minification)補充資料
合併與最佳化 - 1.1.0 Alpha 1
在ASP.NET MVC 4網站開發美學第5.6小節談到【合併與最佳化】這個主題，內容中討論的相關功能就是由【System.Web.Optimization.dll】所提供，以前必須由擴充套件來達到的功能，現在都由ASP.NET MVC 4內建的System.Web.Optimization.dll提供，我查了一下書中的截圖，在Visual Studio 2010 RTM版本內版本為1.0.0-beta2，應該是安裝了Visual Studio 2012 Update 1，所以目前開啟的專案已內已經是版本1.0.0。以下會補充一些書藉沒有的內容，共有二篇補充資料，此為第一篇，第二篇會討論Microsoft ASP.NET Web Optimization Framework 1.1.0-alpha1這個下一版本又會提供那些新功能。
啟用合併與最佳化的影響
由http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification提供了一分資料，有使用B/M與沒有使用B/M的差異：
| 項目 | 使用B/M | 未用B/M | 改善 |
|---|---|---|---|
| 檔案請求 | 9 | 34 | 256% |
| KB傳送 | 3.26 | 11.92 | 266% |
| KB接收 | 388.51 | 530 | 36% |
| 載入時間 | 510 MS | 780 MS | 53% |
ASP.NET MVC - 即時整合與壓縮網站輸出的CSS及JavaScript檔案
讓網頁有高效率
不知道你有沒有為了- SEO
- 安全性
- 加速網頁載入
- 減少發出HTTP請求 (Minimize HTTP Requests)
- 使用內容分散式網路 (Use a Content Delivery Network (CDN))
- 避免空白的 src 或 href (Avoid empty src or href)
- 增加過期或Cache-Control標頭(add an Expires or a Cache-Control Header)
- 使用Gzip 組件(Gzip Components)
- 樣式表(CSS檔案)放在最頂端(Put StyleSheets at the Top)
- 腳本(JavaScript檔案)放在最底端(Put Scripts at the Bottom)
- 避免 CSS 表達式(Avoid CSS Expressions)
- 將 JavaScript 與 CSS 放在外部檔案(Make JavaScript and CSS External)
- 減少 DNS 查詢(Reduce DNS Lookups)
- 壓縮 JavaScript 與 CSS(Minify JavaScript and CSS)
- 避免重導向(Avoid Redirects)
- 刪除重複的腳本(JavaScript檔案)(Remove Duplicate Scripts)
- 設置 ETags(Configure ETags)
- 讓AJAX能快取(Make AJAX Cacheable)
- 在AJAX請求中使用 GET 方法(Use GET for AJAX Requests)
- 減少DOM元素數量(Reduce the Number of DOM Elements)
- 不要有HTTP 404錯誤(No 404s)
- 減少 Cookie 大小(Reduce Cookie Size)
- 為組件使用 Cookie-free 網域(Use Cookie-free Domains for Components)
- 避免過濾器(Avoid Filters)
- 不要在HTML裡使用縮放圖片(Do Not Scale Images in HTML)
- 讓favicon.ico圖小且能快取(Make favicon.ico Small and Cacheable)
註1：在查詢相關說明資料時發現，Web Performance Best Practices and Rules 文章內不只有 23 個建議，列在 YSlow 上的 23 個建議，應該重點中的重點了。有些看標題就能了解內容，有些則相反，必須去讀內容能才了解，例如，第 20 點的Cookie-free？非常建議花一些時間全部完整看完。如果你對網頁執行效率或是想改善你的網站/網頁，由此為出發點，絕對是個非常好的開始。另外，這篇 Web Performance Best Practices and Rules 文章和另一本 2007 出版的 High Performance Web Sites: Essential Knowledge for Front-End Engineers (中文：網頁加速的14條黃金法則)重複性很高，內容差不多，原因也很簡單，此書作者是曾任雅虎CPO(Chief Performance Officer)，所以 Web Performance Best Practices and Rules 應該是此書的重點整理版本，作者還提供一個測試那 14 條規則的網站http://stevesouders.com/hpws/rules.php，也非常值的一玩。還有，Will保哥也針對 High Performance Web Sites 這本書提供了非常棒的經驗分享「加速前端網頁效能的14條規則」推薦非讀不可。
借上面的項目，我想要討論的就是第11點「壓縮 JavaScript 與 CSS(Minify JavaScript and CSS)」。其實第9點「將 JavaScript 與 CSS 放在外部檔案(Make JavaScript and CSS External)」可以和第11點一起討論。
當網站開發到一定層度，我們會開始切割CSS檔案及JavaScript檔案以方便管理。
CSS檔案分割範例
例如，原本單一的CSS檔案，我們分割為 reset.css、layout.css、header.css、main.css、footer.css、ie6.css，依每個網站需求規劃而定。
JavaScript檔案分割範例
例如，原本單一的JavaScript檔案，我們分割為ajax.js、cookie.js、dom.js、forms.js、tables.js、validate.js、windows.js、ie6hack.js、ie7.js、ieall.js，依每個網站需求規劃而定。
也就是第9點所討論的內容。我認為，切割最重要的是「縮小問題點」。例如，validate.js，是我常新增、修改、使用的一支 JavaScript，當使用者反應說"驗證"方便有問題時，我馬上知道要去找那一支程式查詢及修改，例如有一次使用者反應，為什麼程式在 Firefox 之下都不會有任何提示，而只有 IE 有？查詢之下，我使用到 IE 專用語法，結果所有 Firefox 都可以在不驗證情況下送出表單，嚇死我了。
網站上線之後
好了，通常那是上線開發之時，那上線之後呢？先看一個討論串「抄很大、抄不用錢」，線上之前。建議進行第11點「壓縮 JavaScript 與 CSS(Minify JavaScript and CSS)」，這方面的線上工具很多，然後進行上線動作。回到討論串，因為那些 JavaScript 沒有經過壓縮，都是明碼，要了解及看懂內容對有功力的人，不是太難。以 JavaScript 而言，壓縮過程會順便重新編碼過，讓人看懂不容易。如果你辛苦寫了 JavaScript 或 jQuery 的程式碼，不想很容易讓人家複製使用，那請執行壓縮這一步驟。
你可以試著去看 jquery-version.js 與 jquery-version.min.js，兩個 JavaScript 檔案的內容。就會了解我說的意思。
但切割及壓縮CSS與JavaScript檔案容易造成一個問題：「管理不易。」
你可以很方便針對「專案」進行版本控制，但針對大量切割的CSS檔案與JavaScript檔案進行版本控制不太容易。另一重點是，我每次只對針對CSS或JavaScript檔案進行了修改，就必須「重新製作壓縮後的CSS與JavaScript檔案」，然後上傳、覆寫原有的CSS與JavaScript檔案。
或許你能學 jQuery，分為未壓縮 jquery-version.js 與壓縮 jquery-version.min.js，也是不錯，不過那一個 min 很好猜，有心人大概只要把 min 去除，就可以得到未壓縮的原始碼。
這方面我有二個想法：
- 讓未壓縮與壓縮檔案命名之間無關聯性，但這又造成「管理更加不易」。
- 讓未壓縮與壓縮檔案放在不同目錄之中，且那著目錄命名差異大或無關聯性。但還是一樣，易造成「管理更加不易」。
第二點，例如，jsUnZip與jsZip兩個目錄，關聯性及命名差異不大，也是很好猜。但如果改為kkbruceUUUjs(UUU代表unzip)與kkbruceZjs(Z代表zip)目錄，你只要不要在上線網頁引用kkbruceUUUjs目錄裡的 JavaScript 檔案，我想就很難猜得到。
還是麻煩呀，有沒有更好的辦法？
有，不然我前面廢話連篇做什麼？
訂閱：
文章 (Atom)