使用Twitter Bootstrap的最佳实践是什么,从CDN引用它或在我的服务器上创建本地副本?
由于Bootstrap不断进化,恐怕如果我参考CDN,用户会看到不同的网页随着时间的推移,一些标签甚至可能会损坏。最多人的选择是什么?
解决方法
Why Not Both ¯\_(ツ)_/¯ ? Scott Hanselman有一篇关于使用CDN获得性能提升的优秀文章,但优雅
falling back to a local copy in case the CDN is down。
具体到bootstrap,你可以做到以下到load from a CDN with a local fallback:
<head> <!-- Bootstrap CSS CDN --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"> </head> <body> <!-- APP CONTENT --> <!-- jQuery CDN --> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <!-- jQuery local fallback --> <script>window.jQuery || document.write('<script src="/local/jquery.min.js"><\/script>')</script> <!-- Bootstrap JS CDN --> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> <!-- Bootstrap JS local fallback --> <script>if(typeof($.fn.modal) === 'undefined') {document.write('<script src="/local/bootstrap.min.js"><\/script>')}</script> <!-- Bootstrap CSS local fallback --> <script> $(document).ready(function() { var bodyColor = $('body').css('color'); if(bodyColor != 'rgb(51,51,51)') { $("head").prepend('<link rel="stylesheet" href="/local/bootstrap.min.css">');}}); </script> </body>
对你的最佳实践问题,有很多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.
对于你的版本控制关注,任何值得它的CDN让你定位一个特定版本的库,所以你不会不小心引入破坏性的更改每个版本。