Yet i come across this scenario again. After Merging all my js into 1, i found out it can’t run. this usually happens when the whole js is merge into 1 , Because Browser Lack Capability in handling the errors when in one large file compare to one by one.
After looking 1 by 1. and using jslint. i found that Facebox.js again is not properly written. there are lot of no semicolon in the end. after adding semi colon in many lines, it runs. After that i use the JSMin to minimize it.
But what about the Server Control? Server control usually use the scriptResource.Axd .it’s a handler for the Java script for the control.
If you include many Ajaxtoolkit control,3rd Party Control which integrate with ASP.NET Ajax ex:telerik,etc.
You can see that each of that control is adding a seperate call of Scriptresource.axd.
How can we merge it?
Well first download the Helper which can detect our Asp.net ajax related Javascript References. ScriptReferenceProfiler
add to your bin. Reference on your toolbox. Put that on your page.
When you run your page, the dll will output all the Reference needed for your page .
For example:
15 References Found:
1: <asp:ScriptReference name="MicrosoftAjax.js"/>
2: <asp:ScriptReference name="MicrosoftAjaxWebForms.js"/>
3: <asp:ScriptReference name="Telerik.Web.UI.Common.Core.js" assembly="Telerik.Web.UI, Version=2009.2.701.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4"/>
4: <asp:ScriptReference name="Telerik.Web.UI.Common.jQuery.js" assembly="Telerik.Web.UI, Version=2009.2.701.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4"/>
5: <asp:ScriptReference name="Telerik.Web.UI.Common.jQueryPlugins.js" assembly="Telerik.Web.UI, Version=2009.2.701.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4"/>
6: <asp:ScriptReference name="Telerik.Web.UI.Common.Navigation.NavigationScripts.js" assembly="Telerik.Web.UI, Version=2009.2.701.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4"/>
7: <asp:ScriptReference name="Telerik.Web.UI.ComboBox.RadComboBoxScripts.js" assembly="Telerik.Web.UI, Version=2009.2.701.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4"/>
8: <asp:ScriptReference name="Telerik.Web.UI.Ajax.Ajax.js" assembly="Telerik.Web.UI, Version=2009.2.701.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4"/>
9: <asp:ScriptReference name="AjaxControlToolkit.Common.Common.js" assembly="AjaxControlToolkit, Version=3.0.30512.17815, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e"/>
10: <asp:ScriptReference name="AjaxControlToolkit.Compat.Timer.Timer.js" assembly="AjaxControlToolkit, Version=3.0.30512.17815, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e"/>
11: <asp:ScriptReference name="AjaxControlToolkit.Animation.Animations.js" assembly="AjaxControlToolkit, Version=3.0.30512.17815, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e"/>
12: <asp:ScriptReference name="AjaxControlToolkit.ExtenderBase.BaseScripts.js" assembly="AjaxControlToolkit, Version=3.0.30512.17815, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e"/>
13: <asp:ScriptReference name="AjaxControlToolkit.AlwaysVisibleControl.AlwaysVisibleControlBehavior.js" assembly="AjaxControlToolkit, Version=3.0.30512.17815, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e"/>
14: <asp:ScriptReference name="AjaxControlToolkit.RoundedCorners.RoundedCornersBehavior.js" assembly="AjaxControlToolkit, Version=3.0.30512.17815, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e"/>
15: <asp:ScriptReference name="AjaxControlToolkit.DropShadow.DropShadowBehavior.js" assembly="AjaxControlToolkit, Version=3.0.30512.17815, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e"/>
Then on Your Script Manager add all that references Under CompositeScripts->scripts Tag
1: <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true">
2: <CompositeScript ScriptMode="Release">
3: <Scripts>
4: <asp:ScriptReference name="MicrosoftAjax.js"/>
5: <asp:ScriptReference name="MicrosoftAjaxWebForms.js"/>
6: <asp:ScriptReference name="Telerik.Web.UI.Common.Core.js" assembly="Telerik.Web.UI, Version=2009.2.701.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4"/>
7: <asp:ScriptReference name="Telerik.Web.UI.Common.jQuery.js" assembly="Telerik.Web.UI, Version=2009.2.701.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4"/>
8: <asp:ScriptReference name="Telerik.Web.UI.Common.jQueryPlugins.js" assembly="Telerik.Web.UI, Version=2009.2.701.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4"/>
9: <asp:ScriptReference name="Telerik.Web.UI.Common.Navigation.NavigationScripts.js" assembly="Telerik.Web.UI, Version=2009.2.701.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4"/>
10: <asp:ScriptReference name="Telerik.Web.UI.ComboBox.RadComboBoxScripts.js" assembly="Telerik.Web.UI, Version=2009.2.701.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4"/>
11: <asp:ScriptReference name="Telerik.Web.UI.Ajax.Ajax.js" assembly="Telerik.Web.UI, Version=2009.2.701.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4"/>
12: <asp:ScriptReference name="AjaxControlToolkit.Common.Common.js" assembly="AjaxControlToolkit, Version=3.0.30512.17815, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e"/>
13: <asp:ScriptReference name="AjaxControlToolkit.Compat.Timer.Timer.js" assembly="AjaxControlToolkit, Version=3.0.30512.17815, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e"/>
14: <asp:ScriptReference name="AjaxControlToolkit.Animation.Animations.js" assembly="AjaxControlToolkit, Version=3.0.30512.17815, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e"/>
15: </Scripts>
16: </CompositeScript>
17: </asp:ScriptManager>
If You reference Too many Script Reference it will throws Error . like “too many script references , can’t exceed 1024 Characters”
Well You have to split it on another one using The scriptmanagerProxy. you can also you scriptmanager proxy on your Sub COntrol(Ascx)
Actually What you will have now is 2 ScriptResource.axd. So each scriptmanagerproxy will result in new ScriptResource.axd Group
For Example:
1: <asp:ScriptManagerProxy runat="server">
2: <CompositeScript ScriptMode="Release">
3: <Scripts>
4: <asp:ScriptReference name="AjaxControlToolkit.ExtenderBase.BaseScripts.js" assembly="AjaxControlToolkit, Version=3.0.30512.17815, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e"/>
5: <asp:ScriptReference name="AjaxControlToolkit.AlwaysVisibleControl.AlwaysVisibleControlBehavior.js" assembly="AjaxControlToolkit, Version=3.0.30512.17815, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e"/>
6: <asp:ScriptReference name="AjaxControlToolkit.RoundedCorners.RoundedCornersBehavior.js" assembly="AjaxControlToolkit, Version=3.0.30512.17815, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e"/>
7: <asp:ScriptReference name="AjaxControlToolkit.DropShadow.DropShadowBehavior.js" assembly="AjaxControlToolkit, Version=3.0.30512.17815, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e"/>
8:
9: </Scripts>
10: </CompositeScript>
11: </asp:ScriptManagerProxy>
The Less HttpRequest there are, the faster the Page will load,Especially JS.
Because Browser Behavior Tend to Block Other Downloads Until the JS is finished Downloaded
And As usual you should put the JS before the Body End Tag