JavaScript Lazy Load vs Combine/Minify vs CDN Javascript (AngularJS)

What are the scenarios when you want to use CDN to load a javascript file? And which files you might want to lazy load. Or perhaps which scripts are the best candidate to be combined and minified?

for example:

jquery + jquery plugins - should these be accessed via CDN or better to combine/minify them as one to be accessed by just one request

angularjs modules - is it better to lazy load modules as needed or just combine/minify them all at once upon deployment so all modules are actually available to the application at any time

Let me know your idea on this

This question is kind of subjective, but here's my opinion.

CDN's are great because:

1. Provide better performance as the content is cached around the world. This will mean lower latency for sites accessed from a wide range of locations
2. The scripts will be cached so if i visit one site that uses the latest stable Angular on google cdn and then visit another with the same then only one request is performed. The more sites using cdns the higher likelihood that scripts will be cached so they should be used when possible
3. Reduce the load on your servers which in turn will reduce the cost. This is especially important for sites that get a lot of traffic and also cloud hosted sites as you pay for what you use. I would say for cloud it's a must to use cdns
4. As browsers have limits on the number of requests per domain at once, cdns will increase the amount of concurrent requests to content

Issues with CDN's:

1. For each script a separate request needs to be made (unless cached) so this can increase the total amount of requests for your site
2. Cdn could go down or suffer performance problems which could cause your site to go down. If using a cdn make sure you have a failback to a local version if the cdn fails e.g. for Angular check window.angular

Combining is great because:

1. It reduces the amount of requests. This is important on mobile because mobile connections have high latency. It's also important because browsers can only perform a fixed number of requests per domain. This will also reduce the load on your servers as there is less requests to process

In short, use cdns when you can for common scripts such as angular, jquery etc and then use combining and minification for your own custom scripts. You should try to aim to only have one request for your own scripts.

If you have a huge amount of javascript then you should consider lazy loading of your scripts to reduce the initial loading time of you site.