Hi,

Thank you so much for your quick response,

Please note that, we had downloaded these references into JS files, and include these files as a local reference in project, how we use those local references into loader like as your suggested example? We need to download only required resources rather all JS files for fast UI rendering. Local downloaded files are attached. Please prepare a sample application, its very helpful for us.

Thanks,

Sufyan

Hi,

Thank you for the attached sample, I am currently looking at it and will update you with my findings.

Hi,

It really makes no difference to the way you load resources from the cdn or from the local machine - when referencing a cdn resource you type in the url of the resource. When you have the resource locally you can keep it under a dir in your project's dir and provide a relative path to the resource instead of the full cdn reference.

Please let me know if you need further assistance with this.

Hi Hristo,

I didn't understand what resources are dependency is used in my sample application. It would be nice if you change my sample application with your suggestions. its really very helpful for us.

My sample application is attached with locally used references.

We are looking for a positive response.

Thanks,

Sufyan

Hi Abu,

I am sorry for late response. As I said you can further diminish the amount of downloaded resources by specifying only the features you need. In your case this will look like this:

        $.ig.loader({
            scriptPath: "http://cdn-na.infragistics.com/igniteui/2015.1/latest/js/",
            cssPath: "http://cdn-na.infragistics.com/igniteui/2015.1/latest/css/",
            resources:  "igDataChart.Category.Financial.Annotation," +
                        "igniteui-angular"    
        });

However the DOMLoaded time and time spent for the page loading as a whole will still be higher, and this is due to those reasons:

1) igLoader makes a request for each css and js file that needs to be loaded. The more features the widget has, the more requests made.

2) Browsers work in a way that they wait one js file to be loaded before loading next one. Also, no more than 2 requests at the same domain are allowed simultaneously.

As you see this will decrease loading time. First a request is made for the base igDataChart widget and once it is loaded a new request will be made for the file with categoryChart, then comes the FinancialChart and so on.

What you can do to diminish the delay time in your sample app is to move the <Script> tag with all your code above the <div class="container-fluid">. Please let me know if you have further questions on the matter.

Any update?

Hi,

Thank you for your feedback ! I have noticed this issues and will update the sample accordingly. Will be able to do this today and when done I will update this thread.

Hello Abu,

Please find the attached modified sample that benefits from the igLoader with a file name Chart_mod.html. You can see that the size of the loaded resources is less, so I believe this should improve the performance of your app. I have also included your original sample so that you can compare.

Please note:

1) Both samples load resources from the CDN, so that you can easily check the size of the resources via the browser developer tools and it will be more close to real life scenario when users browses will also need to download those resources and will not load them from the local machine.

2) The modified sample load all resources for the igDataChart by using a mask:

            resources:  "igDataChart.*," + // line 427

however you can further diminish the size of the loaded resources by loading aonly those resources for the igDataChart that you use in your app:

            resources: 'igDataChart.RangeCategory.Scatter'+  // line 427

3) I have commented line 625, because I got error. I think you will be able to fix it.

I hope this meets your requirements. Please let me know if you have further questions on the matter.