Why Not Both ¯\_(ツ)_/¯ ? Scott Hanselman has a great article on using a CDN for performance gains but gracefully falling back to a local copy in case the CDN is down.
Specific to bootstrap, you can do the following to load from a CDN with a local fallback:
Working Demo in Plunker
<head>
<!-- Bootstrap CSS CDN -->
<link rel="stylesheet" href="~https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
<!-- Bootstrap CSS local fallback -->
<script>
var test = document.createElement("div")
test.className = "hidden d-none"
document.head.appendChild(test)
var cssLoaded = window.getComputedStyle(test).display === "none"
document.head.removeChild(test)
if (!cssLoaded) {
var link = document.createElement("link");
link.type = "text/css";
link.rel = "stylesheet";
link.href = "lib/bootstrap.min.css";
document.head.appendChild(link);
}
</script>
</head>
<body>
<!-- APP CONTENT -->
<!-- jQuery CDN -->
<script src="~https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<!-- jQuery local fallback -->
<script>window.jQuery || document.write('<script src="lib/jquery.min.js"><\/script>')</script>
<!-- Bootstrap JS CDN -->
<script src="~https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!-- Bootstrap JS local fallback -->
<script>if(typeof($.fn.modal) === 'undefined') {document.write('<script src="lib/bootstrap.min.js"><\/script>')}</script>
</body>
Updates
- you can also do the same test using YepNope or fallback.js
- per Flash’s comment and this solution, updated answer to check for
.visibleclass instead of testing forrgb(51, 51, 51) - per deste’s comment, updated to use
.hiddenand.d-nonefor either Boostrap 3.x or 4 - when testing if a stylesheet loaded, you have to look for a style that would have been applied, create an element, and see if it has been applied.
- Updated the stylesheet to load immediately in the head by using vanilla js. You need to create a test element using
Document.createElement(), apply bootstrap classes, useWindow.getComputedStyle()to test fordisplay:none, and then conditionally insert a stylesheet using js.
Best Practices
To your question on Best Practices, there are a lot of very good reasons to use a CDN in a production environment:
- It increases the parallelism available.
- It increases the chance that there will be a cache-hit.
- It ensures that the payload will be as small as possible.
- It reduces the amount of bandwidth used by your server.
- It ensures that the user will get a geographically close response.
To your versioning concern, any CDN worth its weight in salt with let you target a specific version of the library so you don’t accidentally introduce breaking changes with each release.
Using document.write
According to the mdn on document.write
Note: as
document.writewrites to the document stream, callingdocument.writeon a closed (loaded) document automatically callsdocument.open, which will clear the document.
However, the usage here is intentional. The code needs to be executed before the DOM is fully loaded and also in the correct order. If jQuery fails, we need to inject it into the document inline before we attempt to load bootstrap, which relies on jQuery.
HTML Output After Load:
In both of these instances though, we’re calling while the document is still open so it should inline the contents, rather than replacing the entire document. If you’re waiting till the end, you’ll have to replace with document.body.appendChild to insert dynamic sources.
Aside: In MVC 6, you can do this with link and script tag helpers