El valor de una CDN radica en la probabilidad de que el usuario ya haya visitado otro sitio llamando a ese mismo archivo desde esa CDN, y se vuelve cada vez más valioso según el tamaño del archivo. La probabilidad de que este sea el caso aumenta con la ubicuidad del archivo que se solicita y la popularidad de la CDN.
Con esto en mente, extraer un archivo relativamente grande y popular de un CDN popular tiene mucho sentido. jQuery y, en menor grado, jQuery UI, se ajustan a este proyecto de ley.
Mientras tanto, la concatenación de archivos tiene sentido para archivos más pequeños que no es probable que cambien mucho; sus complementos de uso común se ajustarán a esta factura, pero el código específico de la aplicación principal probablemente no lo haga: podría cambiar de una semana a otra, y si ' Si lo concatena con todos sus otros archivos, tendrá que obligar al usuario a descargar todo de nuevo.
El texto estándar de HTML5 hace un buen trabajo al proporcionar una solución genérica para esto:
- Modernizr se carga desde local en la cabeza: es muy pequeño y difiere bastante de una instancia a otra, por lo que no tiene sentido obtenerlo de una CDN y no le hará daño al usuario cargarlo desde su servidor. Se pone en la cabeza porque CSS puede estar haciendo uso de él, por lo que desea que se conozcan sus efectos antes de que se procese el cuerpo. Todo lo demás va en la parte inferior, para evitar que los scripts más pesados bloqueen el procesamiento mientras se cargan y ejecutan.
- jQuery de la CDN, ya que casi todo el mundo lo usa y es bastante pesado. Es probable que el usuario ya tenga esto almacenado en caché antes de visitar su sitio, en cuyo caso lo cargará desde el caché al instante.
- Todas sus dependencias de terceros más pequeñas y fragmentos de código que no es probable que cambien mucho se concatenan en un
plugins.js
archivo cargado desde su propio servidor. Esto se almacenará en caché con un encabezado de vencimiento distante la primera vez que el usuario visite y se cargará desde el caché en visitas posteriores.
- Su código central entra
main.js, con un encabezado de vencimiento más cercano para tener en cuenta el hecho de que la lógica de su aplicación puede cambiar de una semana a otra o de un mes a otro. De esta manera, cuando haya corregido un error o introducido una nueva funcionalidad cuando el usuario visite dentro de quince días, esto se puede cargar de nuevo, mientras que todo el contenido anterior se puede traer desde el caché.
Para sus otras bibliotecas principales, debe mirarlas individualmente y preguntarse si deben seguir el ejemplo de jQuery, cargarse individualmente desde su propio servidor o concatenarse. Un ejemplo de cómo podría llegar a esas decisiones:
- Angular es increíblemente popular y muy grande. Consíguelo del CDN.
- Twitter Bootstrap tiene un nivel similar de popularidad, pero tiene una selección relativamente pequeña de sus componentes, y si el usuario aún no lo tiene, puede que no valga la pena descargarlo completo. Dicho esto, la forma en que encaja en el resto de su código es bastante intrínseca, y no es probable que lo cambie sin reconstruir todo el sitio, por lo que es posible que desee mantenerlo alojado localmente pero mantener sus archivos separados de su principal
plugins.js. De esta manera, siempre puede actualizar sus plugins.jsextensiones con Bootstrap sin obligar al usuario a descargar todo el núcleo de Bootstrap.
Pero no es imperativo: su kilometraje puede variar.