Несколько файлов на CDN по сравнению с одним файлом локально

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

Вытягивание внешних библиотек из CDN (как сегодня).
Сочетание всех файлов с одним js и одним css файлом и сохранение их локально.

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

Ответ 1

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

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

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

HTML5-шаблон неплохо дает общее решение для этого:

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

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

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

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