Ценность CDN заключается в вероятности того, что пользователь уже посетил другой сайт, вызывающий тот же файл из этого CDN, и становится все более ценным в зависимости от размера файла. Вероятность того, что это так, увеличивается с повсеместностью запрашиваемого файла и популярностью CDN.
Имея это в виду, получение относительно большого и популярного файла из популярного CDN имеет абсолютный смысл. jQuery и, в меньшей степени, jQuery UI, соответствуют этим требованиям.
Между тем, объединение файлов имеет смысл для файлов меньшего размера, которые вряд ли сильно изменятся - ваши часто используемые плагины будут соответствовать этому счету, но ваш основной код, зависящий от приложения, вероятно, нет: он может меняться от недели к неделе, и если вы повторно объединив его со всеми другими файлами, вам придется заставить пользователя загружать все заново.
Шаблон HTML5 отлично справляется с этой задачей, предоставляя универсальное решение:
- Modernizr загружается из локального в голову: он очень маленький и сильно отличается от экземпляра к экземпляру, поэтому нет смысла использовать его из CDN, и пользователю не будет слишком больно загружать его из вашего сервер. Он вставлен в голову, потому что CSS может его использовать, поэтому вы хотите, чтобы его эффекты были известны до рендеринга тела. Все остальное идет внизу, чтобы ваши более тяжелые скрипты не блокировали рендеринг во время загрузки и выполнения.
- jQuery из CDN, так как его используют почти все, и он довольно тяжелый. Пользователь, вероятно, уже будет кэшировать это до того, как посетит ваш сайт, и в этом случае он мгновенно загрузит его из кеша.
- Все ваши меньшие сторонние зависимости и фрагменты кода, которые вряд ли сильно изменятся, объединяются в
plugins.js
файл, загруженный с вашего собственного сервера. Это будет кэшироваться с заголовком отдаленного истечения срока действия при первом посещении пользователя и загружаться из кеша при последующих посещениях.
- Входит ваш основной код
main.jsс более близким заголовком истечения срока действия, чтобы учесть тот факт, что логика вашего приложения может меняться от недели к неделе или от месяца к месяцу. Таким образом, когда вы исправляете ошибку или вводите новые функции, когда пользователь посещает сайт через две недели, он может быть загружен свежим, в то время как весь вышеуказанный контент может быть доставлен из кеша.
Что касается других ваших основных библиотек, вы должны смотреть на них по отдельности и спрашивать себя, должны ли они следовать примеру jQuery, загружаться индивидуально с вашего собственного сервера или объединяться. Пример того, как вы могли прийти к этим решениям:
- Angular невероятно популярен и очень велик. Получите его в CDN.
- Twitter Bootstrap находится на том же уровне популярности, но у вас относительно небольшой выбор его компонентов, и, если у пользователя его еще нет, возможно, не стоит заставлять его загружать полную версию. Сказав это, то, как он вписывается в остальную часть вашего кода, довольно внутренне, и вы вряд ли измените его, не перестраивая весь сайт, поэтому вы можете сохранить его локально, но хранить его файлы отдельно от вашего основной
plugins.js. Таким образом, вы всегда можете обновить свои plugins.jsрасширения Bootstrap, не заставляя пользователя загружать все ядро Bootstrap.
Но это не обязательно - ваш пробег может отличаться.