CODEWITHSUNDEEP
javascriptangularjs
blaster
blaster

Reputation: 8937

Google CDN for Angular Dependencies?

Is there a way to reduce the following includes down to one?

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-route.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-sanitize.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-cookies.min.js"></script>

I cannot find a combined version of these hosted on Google's CDN.

Upvotes: 49

Views: 49804

Answers (4)

Ashish Yadav
Ashish Yadav

Reputation: 3206

Either you can use gulp task to build them up into a single script or you can use bower to install these dependencies at once.

Upvotes: 2

Colton McCormack
Colton McCormack

Reputation: 771

I would argue that the main benefit of a CDN is for everyone to be using the same files, thus allowing for caching to remove the need to load the file at all for most visitors due to its widespread use across other sites.

Assumably, the number of permutations required to bundle various configurations of Angular dependencies would completely negate this benefit, and you would be better off packaging the bundle with all of your other JS for the lowest possible number of requests and serving it yourself.

However, it does seem as if Angular updates rather frequently which, while good for bug fixes, means that there are probably many different versions (and thus files) in use in production environments at the moment. This will also lower the benefit of caching across various sites.

When in doubt, test both methods across devices from friends/family/work/etc. that have seen normal internet usage on sites other than your own.

I would guess that in most cases it would be smarter to just include each module's CDN link separately like you did above and let caching take care of reducing the actual number of requests. If that becomes common practice then the extra number of files won't have much impact on load time.

Upvotes: 9

Luis Cantero
Luis Cantero

Reputation: 1288

I agree with Colt, but the following can be useful if used wisely (see "Load multiple files with a single HTTP request"): JSDelivr

Upvotes: 2

aludvigsen
aludvigsen

Reputation: 5991

I have been looking for a bundle myself, but haven't found one yet. Seems to me you have to bundle them manually if you want to have them all in one js. file.

I was thinking about creating a grunt task (or similar) to fetch all dependencies and merge them into one file. I know you want to use a CDN, but just wanted to share that thought.

update
For anyone interested in the latter, just came across this grunt-fetch-from-cdn plugin. Haven't tried it myself yet, but looks interesting.

Upvotes: 15

Related Questions