MVC中的使用捆綁和縮小(BundleConfig.RegisterBundles)

使用捆綁與 ASP.NET MVC 放縮法

在這一節我們將創建 ASP.NET MVC 項目，審查捆綁和縮小。首先，創建一個新的 ASP.NET MVC 互聯網項目，命名爲MvcBM ，而無需更改任何默認設置。

打開App_Start\BundleConfig.cs文件並檢查的 RegisterBundles 方法，用於創建、註冊和配置包。下面的代碼演示RegisterBundles 方法的部分。

<span class="pln"> </span><span class="kwd">public</span><span class="pln"> </span><span class="kwd">static</span><span class="pln"> </span><span class="kwd">void</span><span class="pln"> </span><span class="typ">RegisterBundles</span><span class="pun">(</span><span class="typ">BundleCollection</span><span class="pln"> bundles</span><span class="pun">)</span><span class="pln">
</span><span class="pun">{</span><span class="pln">
     bundles</span><span class="pun">.</span><span class="typ">Add</span><span class="pun">(</span><span class="kwd">new</span><span class="pln"> </span><span class="typ">ScriptBundle</span><span class="pun">(</span><span class="str">"~/bundles/jquery"</span><span class="pun">).</span><span class="typ">Include</span><span class="pun">(</span><span class="pln">
                 </span><span class="str">"~/Scripts/jquery-{version}.js"</span><span class="pun">));</span><span class="pln">
         </span><span class="com">// Code removed for clarity.</span><span class="pln">
</span><span class="pun">}</span>

上面的代碼中創建名爲~/bundles/jquery ，其中包括所有適當的新 JavaScript 束（這是調試或模糊不清但不是。vsdoc）在腳本文件夾中的文件相匹配的通配符字符串"~/Scripts/jquery-{版本}.js"。對於 ASP.NET MVC 4，這意味着調試配置中，文件jquery 1.7.1.js將被添加到包。在發佈配置， jquery 1.7.1.min.js將被添加。捆綁框架如以下幾個共同的約定：

如果“FileX.min.js”和“FileX.js”都存在，請爲發行版選擇“.min”文件。
選擇用於調試的非".min"版本。
忽略"-vsdoc"僅使用智能感知的文件（如 jquery-1.7.1-vsdoc.js）。

如上所示的{version}通配符匹配用於自動創建一個 jQuery 束具有適當版本的 jQuery腳本文件夾中。在此示例中，使用通配符提供了以下好處：

允許您使用 NuGet 更新到新的 jQuery 版本而無需更改前面的綁定代碼或 jQuery 引用在您查看網頁。
自動選擇完整版，爲調試配置和發佈的".min"版本生成。

使用 CDN

以下代碼將使用 CDN jQuery 綁定來替換本地 jQuery 綁定。

<span class="kwd">public</span><span class="pln"> </span><span class="kwd">static</span><span class="pln"> </span><span class="kwd">void</span><span class="pln"> </span><span class="typ">RegisterBundles</span><span class="pun">(</span><span class="typ">BundleCollection</span><span class="pln"> bundles</span><span class="pun">)</span><span class="pln">
</span><span class="pun">{</span><span class="pln">
    </span><span class="com">//bundles.Add(new ScriptBundle("~/bundles/jquery").Include(</span><span class="pln">
    </span><span class="com">//            "~/Scripts/jquery-{version}.js"));</span><span class="pln">

    bundles</span><span class="pun">.</span><span class="typ">UseCdn</span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">;</span><span class="pln">   </span><span class="com">//enable CDN support</span><span class="pln">

    </span><span class="com">//add link to jquery on the CDN</span><span class="pln">
    </span><span class="kwd">var</span><span class="pln"> jqueryCdnPath </span><span class="pun">=</span><span class="pln"> </span><span class="str">"http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"</span><span class="pun">;</span><span class="pln">

    bundles</span><span class="pun">.</span><span class="typ">Add</span><span class="pun">(</span><span class="kwd">new</span><span class="pln"> </span><span class="typ">ScriptBundle</span><span class="pun">(</span><span class="str">"~/bundles/jquery"</span><span class="pun">,</span><span class="pln">
                jqueryCdnPath</span><span class="pun">).</span><span class="typ">Include</span><span class="pun">(</span><span class="pln">
                </span><span class="str">"~/Scripts/jquery-{version}.js"</span><span class="pun">));</span><span class="pln">

    </span><span class="com">// Code removed for clarity.</span><span class="pln">
</span><span class="pun">}</span>

在上面的代碼中，jQuery 將請求從 CDN 雖然在釋放模式和 jQuery 的調試版本將被回遷本地在調試模式下。當使用 CDN，你應該有一個回退機制在 CDN 請求失敗的情況下。下面的標記片段從佈局文件的末尾顯示腳本添加請求 jQuery 應 CDN 失敗。

<span class="pln">        </span><span class="tag"></footer></span><span class="pln">

        @Scripts.Render("~/bundles/jquery")

        </span><span class="tag"><</span><span class="tag">script</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/javascript"</span><span class="tag">></span><span class="pln">
            </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="kwd">typeof</span><span class="pln"> jQuery </span><span class="pun">==</span><span class="pln"> </span><span class="str">'undefined'</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                </span><span class="kwd">var</span><span class="pln"> e </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">createElement</span><span class="pun">(</span><span class="str">'script'</span><span class="pun">);</span><span class="pln">
                e</span><span class="pun">.</span><span class="pln">src </span><span class="pun">=</span><span class="pln"> </span><span class="str">'@Url.Content("~/Scripts/jquery-1.7.1.js")'</span><span class="pun">;</span><span class="pln">
                e</span><span class="pun">.</span><span class="pln">type </span><span class="pun">=</span><span class="pln"> </span><span class="str">'text/javascript'</span><span class="pun">;</span><span class="pln">
                document</span><span class="pun">.</span><span class="pln">getElementsByTagName</span><span class="pun">(</span><span class="str">"head"</span><span class="pun">)[</span><span class="lit">0</span><span class="pun">].</span><span class="pln">appendChild</span><span class="pun">(</span><span class="pln">e</span><span class="pun">);</span><span class="pln">

            </span><span class="pun">}</span><span class="pln">
        </span><span class="tag"></script></span><span class="pln"> </span><span class="pln">

        @RenderSection("scripts", required: false)
    </span><span class="tag"></body></span><span class="pln">
</span><span class="tag"></html></span>

創建包

包類Include 方法需要的字符串數組，其中每個字符串是資源的虛擬路徑。下面的代碼從App_Start\BundleConfig.cs文件的 RegisterBundles 方法顯示出多個文件添加到包：

<span class="pln">bundles</span><span class="pun">.</span><span class="typ">Add</span><span class="pun">(</span><span class="kwd">new</span><span class="pln"> </span><span class="typ">StyleBundle</span><span class="pun">(</span><span class="str">"~/Content/themes/base/css"</span><span class="pun">).</span><span class="typ">Include</span><span class="pun">(</span><span class="pln">
          </span><span class="str">"~/Content/themes/base/jquery.ui.core.css"</span><span class="pun">,</span><span class="pln">
          </span><span class="str">"~/Content/themes/base/jquery.ui.resizable.css"</span><span class="pun">,</span><span class="pln">
          </span><span class="str">"~/Content/themes/base/jquery.ui.selectable.css"</span><span class="pun">,</span><span class="pln">
          </span><span class="str">"~/Content/themes/base/jquery.ui.accordion.css"</span><span class="pun">,</span><span class="pln">
          </span><span class="str">"~/Content/themes/base/jquery.ui.autocomplete.css"</span><span class="pun">,</span><span class="pln">
          </span><span class="str">"~/Content/themes/base/jquery.ui.button.css"</span><span class="pun">,</span><span class="pln">
          </span><span class="str">"~/Content/themes/base/jquery.ui.dialog.css"</span><span class="pun">,</span><span class="pln">
          </span><span class="str">"~/Content/themes/base/jquery.ui.slider.css"</span><span class="pun">,</span><span class="pln">
          </span><span class="str">"~/Content/themes/base/jquery.ui.tabs.css"</span><span class="pun">,</span><span class="pln">
          </span><span class="str">"~/Content/themes/base/jquery.ui.datepicker.css"</span><span class="pun">,</span><span class="pln">
          </span><span class="str">"~/Content/themes/base/jquery.ui.progressbar.css"</span><span class="pun">,</span><span class="pln">
          </span><span class="str">"~/Content/themes/base/jquery.ui.theme.css"</span><span class="pun">));</span>

捆綁類IncludeDirectory 方法被提供要添加一個目錄（和（可選）的所有子目錄）中與搜索模式匹配的所有文件。包類IncludeDirectory API 如下所示：

<span class="pln"> </span><span class="kwd">public</span><span class="pln"> </span><span class="typ">Bundle</span><span class="pln"> </span><span class="typ">IncludeDirectory</span><span class="pun">(</span><span class="pln">
     </span><span class="kwd">string</span><span class="pln"> directoryVirtualPath</span><span class="pun">,</span><span class="pln">  </span><span class="com">// The Virtual Path for the directory.</span><span class="pln">
     </span><span class="kwd">string</span><span class="pln"> searchPattern</span><span class="pun">)</span><span class="pln">         </span><span class="com">// The search pattern.</span><span class="pln">
 
 </span><span class="kwd">public</span><span class="pln"> </span><span class="typ">Bundle</span><span class="pln"> </span><span class="typ">IncludeDirectory</span><span class="pun">(</span><span class="pln">
     </span><span class="kwd">string</span><span class="pln"> directoryVirtualPath</span><span class="pun">,</span><span class="pln">  </span><span class="com">// The Virtual Path for the directory.</span><span class="pln">
     </span><span class="kwd">string</span><span class="pln"> searchPattern</span><span class="pun">,</span><span class="pln">         </span><span class="com">// The search pattern.</span><span class="pln">
     </span><span class="kwd">bool</span><span class="pln"> searchSubdirectories</span><span class="pun">)</span><span class="pln">    </span><span class="com">// true to search subdirectories.</span>

在視圖中使用 Render 方法中，（對 CSS Styles.Render ) 和Scripts.Render的 JavaScript 來引用的捆綁包。從Views\Shared\_Layout.cshtml文件下面的標記顯示默認 ASP.NET 互聯網項目視圖如何引用 CSS 和 JavaScript 的捆綁包。

<span class="dec"><!DOCTYPE html></span><span class="pln">
</span><span class="tag"><html</span><span class="pln"> </span><span class="atn">lang</span><span class="pun">=</span><span class="atv">"en"</span><span class="tag">></span><span class="pln">
</span><span class="tag"><head></span><span class="pln">
    @* Markup removed for clarity.*@    
  </span><span class="pln">  @Styles.Render("~/Content/themes/base/css", "~/Content/css")
    @Scripts.Render("~/bundles/modernizr")</span><span class="pln">
</span><span class="tag"></head></span><span class="pln">
</span><span class="tag"><body></span><span class="pln">
    @* Markup removed for clarity.*@
   
   </span><span class="pln">@Scripts.Render("~/bundles/jquery")</span><span class="pln">
   @RenderSection("scripts", required: false)
</span><span class="tag"></body></span><span class="pln">
</span><span class="tag"></html></span>

請注意渲染方法採用字符串數組，因此您可以在一行代碼中添加多個軟件包。你一般會想要使用所創建的必要的 HTML 來引用該資產的渲染方法。您可以使用 Url 方法生成的 URL，該資產，而引用該資產所需的標記。假設你想要使用新的 HTML5 async屬性。下面的代碼演示如何引用 modernizr 使用Url的方法。

<span class="tag"><head></span><span class="pln">
    @*Markup removed for clarity*@
    </span><span class="tag"><meta</span><span class="pln"> </span><span class="atn">charset</span><span class="pun">=</span><span class="atv">"utf-8"</span><span class="pln"> </span><span class="tag">/></span><span class="pln">
    </span><span class="tag"><title></span><span class="pln">@ViewBag.Title - MVC 4 B/M</span><span class="tag"></title></span><span class="pln">
    </span><span class="tag"><link</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"~/favicon.ico"</span><span class="pln"> </span><span class="atn">rel</span><span class="pun">=</span><span class="atv">"shortcut icon"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"image/x-icon"</span><span class="pln"> </span><span class="tag">/></span><span class="pln">
    </span><span class="tag"><meta</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"viewport"</span><span class="pln"> </span><span class="atn">content</span><span class="pun">=</span><span class="atv">"width=device-width"</span><span class="pln"> </span><span class="tag">/></span><span class="pln">
    @Styles.Render("~/Content/css")

   @* @Scripts.Render("~/bundles/modernizr")*@

    </span><span class="tag"><script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">'@Scripts.Url("~/bundles/modernizr")'</span><span class="pln"> </span><span class="atn">async</span><span class="tag">></span><span class="pln"> </span><span class="tag"></script></span><span class="pln">
</span><span class="tag"></head></span>

使用"*"通配符字符，請選擇文件

Include 方法和IncludeDirectory 方法中的搜索模式中指定的虛擬路徑可以接受一個"*"通配符字符作爲前綴或後綴來中最後一個路徑段。搜索字符串是區分大小寫。IncludeDirectory 方法有選擇搜索子目錄。

與下面的 JavaScript 文件考慮一個項目：

Scripts\Common\AddAltToImg.js
Scripts\Common\ToggleDiv.js
Scripts\Common\ToggleImg.js
Scripts\Common\Sub1\ToggleLinks.js

下表顯示的文件添加到捆綁使用通配符，如圖所示：

電話	添加文件或引發異常
Include("~/Scripts/Common/*.js")	AddAltToImg.js，ToggleDiv.js，ToggleImg.js
Include("~/Scripts/Common/T*.js")	無效的模式的異常。通配符字符只允許對的前綴或後綴。
Include("~/Scripts/Common/og.")	無效的模式的異常。只有一個通配符字符被允許。
"Include("~/Scripts/Common/T*")	ToggleDiv.js ToggleImg.js
"Include("~/Scripts/Common/*")	無效的模式的異常。一個純通配符段不是有效的。
IncludeDirectory ("~/Scripts/Common"，"T *"）	ToggleDiv.js ToggleImg.js
IncludeDirectory("~/Scripts/Common", "T*",true)	ToggleDiv.js，ToggleImg.js，ToggleLinks.js

顯式地將每個文件添加到一捆是一般首選在通配符加載的文件，原因如下：

將腳本由通配符默認值添加到加載它們按字母順序，通常不是你想。經常需要 (非字母）按照特定的順序添加 CSS 和 JavaScript 文件。通過添加一個自定義的IBundleOrderer實現，但顯式添加每個文件都少出錯，可以降低這種風險。例如，您可能會添加新的資產到文件夾在將來可能會要求您修改您的IBundleOrderer實現。
查看特定文件添加到使用通配符加載目錄可以包含在引用該捆綁包的所有視圖。如果查看特定腳本添加到包中，你可能會引用捆綁其他視圖上一個 JavaScript 錯誤。

將其他文件導入的 CSS 文件導致兩次加載導入的文件。例如，下面的代碼創建一個束與大多數的 jQuery UI 的主題 CSS 文件加載兩次。

<span class="pln">bundles</span><span class="pun">.</span><span class="typ">Add</span><span class="pun">(</span><span class="kwd">new</span><span class="pln"> </span><span class="typ">StyleBundle</span><span class="pun">(</span><span class="str">"~/jQueryUI/themes/baseAll"</span><span class="pun">)</span><span class="pln">
    </span><span class="pun">.</span><span class="typ">IncludeDirectory</span><span class="pun">(</span><span class="str">"~/Content/themes/base"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"*.css"</span><span class="pun">));</span>

在每個 CSS 文件夾中的文件，包括Content\themes\base\jquery.ui.all.css文件帶來的通配符"*.css"選擇器。Jquery.ui.all.css文件中導入其他 CSS 文件。

limfungsuen

發佈了13 篇原創文章 · 獲贊 9 · 訪問量 12萬+

私信關注

MVC中的使用捆綁和縮小(BundleConfig.RegisterBundles)

使用捆綁與 ASP.NET MVC 放縮法

使用 CDN

創建包

使用"*"通配符字符，請選擇文件

Wireshark 安裝+使用（一）

博客園商業化之路-衆包平臺：繼續召集早期合作開發者

"超時時間已到。在操作完成之前超時時間已過或服務器未響應"的解決方法

關於WebBrowser控制新窗口[_blanck]問題解決總結

一步一步教你網站同步鏡像

Marquee替代 -- 無間滾動

使用SQL語句爲SQL Server 2005創建全文索引

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結