Несколько файлов на CDN и один файл локально



мой сайт использует около 10 сторонних библиотек javascript, таких как jQuery, jQuery UI, prefixfree, несколько плагинов jQuery, а также мой собственный код javascript. В настоящее время я вытаскиваю внешние библиотеки из CDNs, таких как Google CDN и cloudflare. Мне было интересно, что это лучший подход:




  1. вытягивание внешних библиотек из CDNs (как я делаю сегодня).

  2. объединение всех файлов в один js и один css файл и их хранение в местном масштабе.


любые мнения приветствуются до тех пор, как они объясняются.
Спасибо :)

458   1  

1 ответ:

значение CDN заключается в вероятности того, что пользователь уже посетил другой сайт, вызывающий тот же файл из этого CDN, и становится все более ценным в зависимости от размера файла. Вероятность того, что это так, увеличивается с повсеместностью запрашиваемого файла и популярностью CDN.

имея это в виду, вытягивание относительно большого и популярного файла из популярного CDN имеет абсолютный смысл. jQuery, и, в меньшей степени, jQuery UI, соответствуйте этому счету.

между тем, объединение файлов имеет смысл для небольших файлов, которые вряд ли сильно изменятся - ваши обычно используемые плагины будут соответствовать этому счету, но ваш основной код приложения, вероятно, не будет: он может меняться от недели к неделе, и если вы объединяете его со всеми другими файлами, вам придется заставить пользователя загружать все снова и снова.

шаблон HTML5 делает довольно хорошую работу по предоставлению общее решение для этого:

  1. Modernizr загружается из локального в голову: он очень маленький и отличается довольно много от экземпляра к экземпляру, так что это не делает смысл, чтобы источник его из CDN, и это не повредит пользователю слишком много, чтобы загрузить его с вашего сервера. Это положено в голову, потому что CSS может быть используя его, поэтому вы хотите, чтобы его эффекты были известны до тело делает. Все остальное идет на дно, чтобы остановить более тяжелые скрипты блокируют рендеринг, пока они загрузить и выполнить.
  2. jQuery от CDN, так как почти все используют его, и он довольно тяжелый. Пользователь, вероятно, уже будет иметь это кэширование, прежде чем они посетите ваш сайт, и в этом случае они будут загружать его из кэша мгновенно.
  3. все ваши меньшие сторонние зависимости и фрагменты кода, которые вряд ли сильно изменятся, объединяются в plugins.js файл загружен с вашего собственного сервера. Это будет кэшироваться с помощью заголовок удаленного истечения срока действия при первом посещении пользователем и загружается из кэш при последующих посещениях.
  4. ваш основной код идет в main.js, С более близким заголовком истечения срока действия для учета того факта, что логика вашего приложения может измениться с неделя за неделей или месяц за месяцем. Таким образом, когда вы исправите ошибку или введена новая функциональность, когда пользователь посещает две недели теперь это может быть загружено свежим, в то время как все содержимое выше может быть привезли из тайника.

для других основных библиотек, вы должны посмотреть на них индивидуально и спросите себя, должны ли они следовать примеру jQuery, загружаться индивидуально с вашего собственного сервера или объединяться. Пример того, как вы можете прийти к этим решениям:

  • угловой невероятно популярен, и очень большой. Возьмите его из CDN.
  • Twitter Bootstrap находится на аналогичном уровне популярности, но у вас есть относительно тонкий выбор его компонентов, и если пользователь еще не имеет его, возможно, не стоит их получать чтобы загрузить полную вещь. Сказав это, то, как он вписывается в остальную часть вашего кода, довольно внутренне, и вы вряд ли будете изменять его без перестройки всего сайта - поэтому вы можете захотеть сохранить его локально, но сохранить его файлы отдельно от вашего основного plugins.js. Таким образом, вы всегда можете обновить plugins.js с расширениями Bootstrap, не заставляя пользователя загружать все ядро Bootstrap.

но нет никакого императива - ваш пробег может отличаться.

Comments

    Ничего не найдено.