twitter bootstrap - link - ¿Debo usar Bootstrap de CDN o hacer una copia en mi servidor?
framework de bootstrap (3)
¿Cuál es la mejor práctica de usar Twitter Bootstrap, consultarlo desde CDN o hacer una copia local en mi servidor?
Dado que Bootstrap sigue evolucionando, me temo que si me refiero a la CDN, el usuario vería diferentes páginas web a lo largo del tiempo, y algunas etiquetas podrían incluso romperse. ¿Cuál es la elección de la mayoría de la gente?
Depende del sitio específico.
¿Tienes muchos usuarios? ¿Te importa el uso del ancho de banda? ¿Es un problema el rendimiento (las CDN pueden acelerar las respuestas)?
Puede vincular a una versión específica:
//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css
O
//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css
De esta forma, no tiene que preocuparse por las actualizaciones de la biblioteca, es una mejor práctica mantenerse actualizado.
No estoy seguro de cuáles son las estadísticas exactas sobre la elección de los desarrolladores, pero puede echar un vistazo here y ver Miles de millones de solicitudes se envían a Bootstrap CDN, lo que significa que es robusto y seguro de usar.
Traté de editar la respuesta de KyleMit pero el foro estaba marcando como un código incorrecto, incluso no lo estaba, así que estoy agregando mi contribución a continuación:
Como la pregunta está etiquetada como un tema de twitter-bootstrap (y no solo twitter-bootstrap-3 ), tal vez sea útil actualizar la respuesta para la versión más nueva de Bootstrap.
Como el framework agregó una nueva clase para ocultar elementos en su cuarta versión, deberíamos usar .d-none lugar de .hidden en este caso.
Todo lo demás permanece igual en ese caso, excepto la versión de lib (¡por supuesto!)
¿Por qué no ambos ¯ / _ (ツ) _ / ¯? Scott Hanselman tiene un excelente artículo sobre el uso de un CDN para aumentar el rendimiento, pero recae gratamente en una copia local en caso de que el CDN no funcione .
Específico para el arranque, puede hacer lo siguiente para cargar desde un CDN con un respaldo local :
<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 -->
<div id="bootstrapCssTest" class="hidden"></div>
<script>
$(function() {
if ($(''#bootstrapCssTest'').is('':visible'')) {
$("head").prepend(''<link rel="stylesheet" href="/local/bootstrap.min.css">'');
}
});
</script>
</body>
* también puedes hacer la misma prueba usando YepNope o fallback.js
* por comentario de Flash y esta solución , respuesta actualizada para verificar la clase .visible lugar de probar rgb(51, 51, 51)
* al probar si se cargó una hoja de estilo , debe buscar un estilo que se hubiera aplicado, crear un elemento y ver si se ha aplicado.
A su pregunta sobre mejores prácticas, existen muchas buenas razones para usar un CDN en un entorno de producción :
- Aumenta el paralelismo disponible.
- Aumenta las posibilidades de que haya un golpe de caché .
- Asegura que la carga útil sea lo más pequeña posible .
- Reduce la cantidad de ancho de banda utilizado por su servidor.
- Asegura que el usuario obtendrá una respuesta geográficamente cercana .
Para su preocupación de control de versiones, cualquier CDN que valga la pena en términos de sal le permite enfocarse en una versión específica de la biblioteca para que no introduzca accidentalmente cambios de última hora en cada lanzamiento.