[Solved] Load JavaScript and Style Sheets from CDN.

[Ramakrishna]

Hello,

as my application is CDN enabled, I require Telerik Editor related files to load from CDN.

Can anyone help me with suggestions or pointers to configure Telerik Editor related JavaScript files and Style Sheets load from CDN. This impacts performance on load time.

Thank You.

[Ramakrishna]

Hello,

I referred the below 2 URLs and describing the issues I faces while loading from my CDN.

 

http://www.telerik.com/help/aspnet-mvc/web-assets-telerik-cdn-support.html

http://www.telerik.com/help/aspnet-mvc/web-assets-working-with-javascript-web-assets.html

 

My requirement is to load all the Telerik related JavaScript files and Style Sheets from my CDN and not TelerikCDN. To achieve this, I passed CDN URL of the Script files to “ContentDeliveryNetworkUrl” for each file like the statements given below. In this case only the last file “telerik.draganddrop.min.js” is loaded from CDN and rest of the files are loaded from server and not my CDN.

<%= Html.Telerik().ScriptRegistrar().jQuery(true).DefaultGroup(

            group => group.ContentDeliveryNetworkUrl("~/Scripts/2011.2.712/telerik.common.min.js")

                                 .ContentDeliveryNetworkUrl("~/Scripts/2011.2.712/telerik.window.min.js")

                                 .ContentDeliveryNetworkUrl("~/Scripts/2011.2.712/telerik.editor.min.js")

                                 .ContentDeliveryNetworkUrl("~/Scripts/2011.2.712/telerik.imagebrowser.min.js")

                                 .ContentDeliveryNetworkUrl("~/Scripts/2011.2.712/telerik.upload.min.js")

                                 .ContentDeliveryNetworkUrl("~/Scripts/2011.2.712/telerik.list.min.js")

                                 .ContentDeliveryNetworkUrl("~/Scripts/2011.2.712/telerik.combobox.min.js")

                                 .ContentDeliveryNetworkUrl("~/Scripts/2011.2.712/telerik.draganddrop.min.js")

                          .Combined(true)                         

    )%>

 

So, instead of “ContentDeliveryNetworkUrl” I used “Add” method and passed CDN URL as parameter, like given below. This worked, loaded all the provided scripts from my CDN. This works fine when my Telerik Editor partial view is loaded through Ajax call.

 

<%= Html.Telerik().ScriptRegistrar().jQuery(true).Scripts(scripts => scripts.AddGroup("TelerikScripts",

            group => group.Add(CDN_URL("~/Scripts/2011.2.712/telerik.common.min.js"))

                          .Add(CDN_URL("~/Scripts/2011.2.712/telerik.window.min.js"))

                          .Add(CDN_URL("~/Scripts/2011.2.712/telerik.editor.min.js"))

                          .Add(CDN_URL("~/Scripts/2011.2.712/telerik.imagebrowser.min.js"))

                          .Add(CDN_URL("~/Scripts/2011.2.712/telerik.upload.min.js"))

                          .Add(CDN_URL("~/Scripts/2011.2.712/telerik.list.min.js"))

                          .Add(CDN_URL("~/Scripts/2011.2.712/telerik.combobox.min.js"))

                          .Add(CDN_URL("~/Scripts/2011.2.712/telerik.draganddrop.min.js"))

                          .Combined(true)                         

    ))%>

 

My main concern/problem is when Telerik Editor partial view is directly placed on ‘contentHolder’ area of the page and the above mentioned ScriptRegistrar() Tags are placed in FooterContentPlaceHolder region.  In Telerik Editor partial View I am calling only “StyleSheetRegistrar” tag for the style sheets to load from my CDN.

As Telerik Editor partial view is directly placed on ‘contentHolder’, the files related to this editor are loaded first from server and again all the above mentioned scripts are loaded from CDN. So, these are loading twice.

To get around this issue, I added all this CDN URLs to the DefaultGroup. Apparently now the files are loaded  from CDN but below these files, in view source, I am able to see asset.axd URL which loads asset.js file. This file contains all the above scripts crunched into one file. So, even this is doing the work twice.

 

Summary to make my page load only required items:

 

1. While loading Telerik editor through Ajax call the files were loaded through CDN but facing issue while loading the Telerik Editor partial View directly on the page as scripts are loaded twice.

 

1. Can this be done from web.config file to make globally effective in my app. I see from the URL mentioned above, it is specified for files loading from Telerik CDN. I need to load from my CDN.

 

1. I do not require few features like drag and drop. So, is it possible to remove the file “telerik.draganddrop.min.js” from getting loaded to the page.

 

Hence, I request anyone to provide valuable suggestions and best practices.

 

Thanks in advance for all the suggestions.