在Web開發的時候，我們很多時候，需要引用很多CSS檔案、JS檔案，随着使用更多的插件或者獨立樣式檔案，可能我們的Web界面代碼會越來越臃腫，看起來也很累贅，在MVC裡面提供了一個Bundle的對象，用來簡化頁面代碼非常友善，本文主要介紹在我的MVC架構裡面，如何使用bundles來簡化頁面的代碼的。
我們知道，随着使用更多的一些效果，我們可能不斷引入一些新的JS和CSS檔案，已達到Web界面更好的表現效果。這樣也就逐漸增加了檔案代碼的行數，造成相對比較臃腫的場景，如下面的我正常使用的Web界面，頭部需要引入很多JS和CSS檔案。
然後這樣的檔案總是在不斷的複制做，非常不雅觀，維護也不友善。
在ASP.NET MVC出來之後，引入了一個叫做Bundle的東西，它用來将js和css檔案捆綁為一個塊進行輸出，能夠極大簡化界面代碼，并預設對這些内容進行壓縮處理，提高效率。
最終簡化的界面代碼如下所示。
為了實作上面的效果，我們需要進行幾步的操作處理。
在App_Start裡面的BundleConfig裡面增加幾行處理代碼，如下所示。
上面代碼，我們增加一些必要的Jquery和一些擴充給的JqueryTool的腳本和樣式，友善統一化管理。
預設的情況下，Bundle是按照字母順序進行排序的，如果需要按照增加的次序進行排序，這需要寫一個自定義的排序規則進行處理，如下所示
然後在調用的時候，修改對象的排序規則即可。
接着在Global.asa.cs裡面，增加對Bundle的注冊，如下所示。
最後在MVC的視圖裡面，就可以使用Bundle來簡化界面代碼了。簡化後的界面代碼如下所示。
運作界面，雖然使用了簡化版本的代碼，依舊正常運作
頁面代碼輸出則還是和原先未優化的一緻。
<a href="http://www.cnblogs.com/wuhuacong/p/3281103.html">基于MVC4+EasyUI的Web開發架構形成之旅--總體介紹</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3317223.html">基于MVC4+EasyUI的Web開發架構形成之旅--界面控件的使用</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3343967.html">基于MVC4+EasyUI的Web開發架構形成之旅--附件上傳元件uploadify的使用</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3344096.html">基于MVC4+EasyUI的Web開發架構形成之旅--架構總體界面介紹</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3352016.html">基于MVC4+EasyUI的Web開發架構形成之旅--基類控制器CRUD的操作</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3361351.html">基于MVC4+EasyUI的Web開發架構形成之旅--權限控制</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3667703.html">基于MVC4+EasyUI的Web開發架構經驗總結（1）-利用jQuery Tags Input 插件顯示選擇記錄</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3669575.html">基于MVC4+EasyUI的Web開發架構經驗總結（2）- 使用EasyUI的樹控件建構Web界面</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3669708.html">基于MVC4+EasyUI的Web開發架構經驗總結（3）- 使用Json實體類建構菜單資料</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3736564.html">基于MVC4+EasyUI的Web開發架構經驗總結（4）--使用圖表控件Highcharts</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3780356.html">基于MVC4+EasyUI的Web開發架構經驗總結（5）--使用HTML編輯控件CKEditor和CKFinder</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3840321.html">基于MVC4+EasyUI的Web開發架構經驗總結（6）--在頁面中應用下拉清單的處理</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3841338.html">基于MVC4+EasyUI的Web開發架構經驗總結（7）--實作省份、城市、行政區三者關聯</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3871991.html">基于MVC4+EasyUI的Web開發架構經驗總結（8）--實作Office文檔的預覽</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3872890.html">基于MVC4+EasyUI的Web開發架構經驗總結（9）--在Datagrid裡面實作外鍵字段的轉義操作</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3873498.html">基于MVC4+EasyUI的Web開發架構經驗總結（10）--在Web界面上實作資料的導入和導出</a>
<a href="http://www.cnblogs.com/wuhuacong/p/4073203.html">基于MVC4+EasyUI的Web開發架構經驗總結（11）--使用Bundles處理簡化頁面代碼</a>
<a href="http://www.cnblogs.com/wuhuacong/p/4085682.html">基于MVC4+EasyUI的Web開發架構經驗總結（12）--利用Jquery處理資料互動的幾種方式</a>
<a href="http://www.cnblogs.com/wuhuacong/p/4085725.html">基于MVC4+EasyUI的Web開發架構經驗總結（13）--DataGrid控件實作自動适應寬帶高度</a>
<a href="http://www.cnblogs.com/wuhuacong/p/4093778.html">基于MVC4+EasyUI的Web開發架構經驗總結（14）--自動生成圖示樣式檔案和圖示的選擇操作</a>