Twitter Bootstrap を使用するベストプラクティスは何ですか? CDN から参照するか、サーバー上にローカルコピーを作成しますか?
Bootstrap は進化し続けているので、CDN を参照すると、時間の経過とともにユーザーが異なる Web ページを表示し、一部のタグが壊れてしまうのではないかと心配しています。ほとんどの人はどのような選択をするのでしょうか?
ベストアンサー1
なぜ両方ではない\(ツ)/¯ ? 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
- As of 2021, all major browsers double partition http cache keys with the top level domain of the requester, so you'll no longer get a performance benefit from previous cache hits on other sites.
- you can also do the same test using YepNope or fallback.js
- per Flash's comment and this solution, updated answer to check for
.visible
class instead of testing forrgb(51, 51, 51)
- per deste's comment, updated to use
.hidden
and.d-none
for 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.update- 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.write
writes to the document stream, callingdocument.write
on 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