Varios archivos en CDN frente a un archivo localmente

93

Mi sitio web utiliza alrededor de 10 bibliotecas javascript de terceros como jQuery, jQuery UI, prefixfree, algunos complementos de jQuery y también mi propio código javascript. Actualmente, extraigo las bibliotecas externas de CDN como Google CDN y cloudflare. Me preguntaba cuál es un mejor enfoque:

  1. Extrayendo las bibliotecas externas de CDN (como lo hago hoy).
  2. Combinar todos los archivos en un solo js y un solo archivo css y almacenarlos localmente.

Cualquier opinión es bienvenida siempre que se explique. Gracias :)

Tzach
fuente

Respuestas:

139

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:

  1. 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.
  2. 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.
  3. 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.
  4. 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.

Barney
fuente
4
Muy buena respuesta. Deje que la caché del navegador trabaje para usted. Me encanta la idea de separar las bibliotecas populares de los archivos concatenados.
Jon
3
Análisis muy útil
usuario
8
Muy buena respuesta. También vale la pena mencionar que CDN permitirá a los usuarios extraer los archivos de un servidor "local" o al menos más cercano (al usuario). Entonces, si su servidor está en Europa, los usuarios de Sudamérica o Rusia, por ejemplo, aún obtendrán los archivos relativamente rápido.
H.Wolper