jQuery¼¼Êõ

»ùÓÚAsp.Net MVC4 BundleÀ¦°óѹËõ¼¼ÊõµÄ½éÉÜ

×ÖºÅ+ ×÷ÕߣºH5Ö®¼Ò À´Ô´£ºH5Ö®¼Ò 2017-02-22 09:00 ÎÒÒªÆÀÂÛ( )

ßÉßËÍø,ѧ±à³Ì,¾ÍÉÏßÉßËÍø,³ÌÐòÔ±ÍøÕ¾,±à³Ìѧϰ,ÐÂÊÖ±à³ÌÈëÃÅ£¡

ºÜ¸ßÐË£¬×î½üÏîÄ¿Óõ½ÁËAsp.Net MVC4 + Entity Framework5£¬·¢ÏÖmvc4¼ÓÈëÁËBundle¡¢Web APIµÈ¼¼Êõ£¬×ÅʵÈÃÎÒÐË·Ü£¬ÒÔÇ°ÊÇÓõÚÈý·½µÄ£¬ÕâÀïÖ÷Ҫ˵˵Bundle¼¼Êõ¡£

ºÜ¶à´óÍøÕ¾¶¼Ã»ÓÐÓÃBundle¼¼ÊõÔì³ÉºÜ¶à×ÊÔ´ÀË·ÑÓëÐÔÄܵÄÎþÉü£¬±ðСÇÆ ÓÃÉÏÁËÄã»á·¢ÏÖËûµÄºÃ´¦£º

½«¶à¸öÇëÇóÀ¦°óΪһ¸öÇëÇ󣬼õÉÙ·þÎñÆ÷ÇëÇóÊý

 Ã»ÓÐʹÓÃBundle¼¼Êõ£¬debugÏ¿´µ½µÄÊÇʵ¼ÊµÄÇëÇóÊýÓë·¾¶

 

ʹÓÃBundle¼¼Êõ£¬²¢ÇÒÓµÓлº´æ¹¦ÄÜ
µ÷ÊÔÉèÖÃΪReleaseģʽ²¢°´F5»òÐÞ¸Äweb.config£¬¾Í¿ÉÒÔ¿´µ½ºÏ²¢ÓëѹËõµÄЧ¹û

ѹËõjavascript£¬cssµÈ×ÊÔ´Îļþ£¬¼õСÍøÂç´ø¿í£¬ÌáÉýÐÔÄÜ

ºǫ́ÅäÖÃ

¡¡¡¡MVC4Ôڼܹ¹ÉÏÓÐЩ±ä¶¯£¬¼ò»¯ÁËÔ­À´µÄGlobal.asax£¬Ôö¼ÓÁËһЩ¾²Ì¬µÄÅäÖÃÎļþÔÚApp_StartÏÂÃ棬ÁôÒâÏÂBundleConfig.cs£¬¹ËÃû˼ÒåÊÇBundleµÄÅäÖã¬ËùÓÐËüµÄÅäÖÃÔÚÕâÀï½øÐоͿÉÒÔÁË£¬µ±È»Ò²¿ÉÒÔµ¥¶ÀµÄÅäÖÃÎļþ¡£

´úÂëÈçÏÂ:

public class BundleConfig { // For more information on Bundling, visit ?LinkId=254725 public static void RegisterBundles(BundleCollection bundles) { bundles.Add(new ScriptBundle("~/bundles/jquery").Include( "~/Scripts/jquery-{version}.js")); bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include( "~/Scripts/jquery-ui-{version}.js")); bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include( "~/Scripts/jquery.unobtrusive*", "~/Scripts/jquery.validate*")); // Use the development version of Modernizr to develop with and learn from. Then, when you're // ready for production, use the build tool at to pick only the tests you need. bundles.Add(new ScriptBundle("~/bundles/modernizr").Include( "~/Scripts/modernizr-*")); bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css")); bundles.Add(new StyleBundle("~/Content/themes/base/css").Include( "~/Content/themes/base/jquery.ui.core.css", "~/Content/themes/base/jquery.ui.resizable.css", "~/Content/themes/base/jquery.ui.selectable.css", "~/Content/themes/base/jquery.ui.accordion.css", "~/Content/themes/base/jquery.ui.autocomplete.css", "~/Content/themes/base/jquery.ui.button.css", "~/Content/themes/base/jquery.ui.dialog.css", "~/Content/themes/base/jquery.ui.slider.css", "~/Content/themes/base/jquery.ui.tabs.css", "~/Content/themes/base/jquery.ui.datepicker.css", "~/Content/themes/base/jquery.ui.progressbar.css", "~/Content/themes/base/jquery.ui.theme.css")); } }

ÕâÀï´ó¼Ò¿ÉÒÔ°´Ä£¿é»¯È¥ÅäÖã¬ÎÒÃÇ¿´µ½µÄÏÂÃæµÄUrl¶ÔÓ¦µÄ¾ÍÊÇÉÏÃæµÄbundles.Add(...) ËùÔö¼ÓµÄjs¡¢cssµÄvirtualPath

ÐèҪעÒâµÄÊDz»Í¬virtualPath Ôö¼ÓµÄÏàͬµÄ×ÊÔ´Îļþ£¬»á±»Öظ´¼ÓÔØ£¡

ǰ̨µ÷ÓÃ

 ¶ÔÓÚ¹«¹²µÄ×ÊÔ´Îļþ£¬Í¨³£ÎÒÃǶ¼»á·Åµ½_Layout.cshtml (webformÖеÄĸ°åÒ³) ÎļþÖÐ

 ¡¡¡¡ScriptÎļþÒýÓãº@Scripts.Render(virtualPath[,virtualPath1][,virtualPath2][,...])
¡¡¡¡ CSSÎļþÒýÓ㺠 @Styles.Render(virtualPath[,virtualPath1][,virtualPath2][,...])

´úÂëÈçÏÂ:

@Styles.Render("~/Content/css") @Styles.Render("~/Content/themes/base/css")

...

@Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/jqueryui") @RenderSection("scripts", required: false)

ÕýÔòÆ¥ÅäÐèÒªµÄ£¬¹ýÂ˲»ÐèÒªµÄ

´úÂëÈçÏÂ:

bundles.IgnoreList.Clear(); bundles.IgnoreList.Ignore("*.debug.js"); bundles.IgnoreList.Ignore("*.min.js"); bundles.IgnoreList.Ignore("*-vsdoc.js"); bundles.IgnoreList.Ignore("*intellisense.js"); bundles.Add(new ScriptBundle("~/bundles/jquery", jqueryCdn).Include( "~/Scripts/jquery-{version}.js")); //Æ¥Åäjquery°æ±¾ ¡¡¡¡ bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include( "~/Scripts/jquery.unobtrusive*", //Æ¥ÅäÎļþÃûǰ׺Ϊjquery.unobtrusive "~/Scripts/jquery.validate*")); ...

ʹÓÃCDN

´úÂëÈçÏÂ:

bundles.UseCdn = true; //ʹÓÃCDN string jqueryCdn = "http:deom.jb51.net/jslib/jquery/jquery-1.7.1.min.js"; bundles.Add(new ScriptBundle("~/bundles/jquery", jqueryCdn).Include( "~/Scripts/jquery-{version}.js"));

µ±cdn·þÎñÆ÷¹ÒÁË»ò²»ÄÜ·ÃÎÊÁË£¬ÕâÀï¾Í»áÑ¡Ôñ±¾µØµÄ×ÊÔ´Îļþ£¬debugÏÂmvc »áÈÃÎÒÃÇ¿´µ½ËûÔ­À´µÄÃæ¾ß£¬Õâµã·Ç³£ºÃÀûÓÚÎÒÃǵ÷ÊÔ¡£¡¡¡¡
¡¡¡¡¡¡

 

¡¡

1.±¾Õ¾×ñÑ­ÐÐÒµ¹æ·¶£¬ÈκÎתÔصĸå¼þ¶¼»áÃ÷È·±ê×¢×÷ÕߺÍÀ´Ô´£»2.±¾Õ¾µÄÔ­´´ÎÄÕ£¬ÇëתÔØʱÎñ±Ø×¢Ã÷ÎÄÕÂ×÷ÕߺÍÀ´Ô´£¬²»×ðÖØÔ­´´µÄÐÐΪÎÒÃǽ«×·¾¿ÔðÈΣ»3.×÷ÕßͶ¸å¿ÉÄܻᾭÎÒÃDZ༭Ð޸Ļò²¹³ä¡£

Ïà¹ØÎÄÕÂ
ÍøÓѵãÆÀ