Javascript - объединять или не объединять, вот в чем вопрос

Question

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

Скажем, у меня есть Default.htm с полем поиска, к которому прикреплено небольшое волшебство Javascript. Затем у меня есть Contact.htm с контактной формой, к которой прикреплена магия Javascript. И, наконец, у меня есть FAQ.htm с несколькими панелями jQuery, показывающими ответы ... Вы получаете картину.

По сути, у меня есть три страницы, на которых всем нужна "некоторая" поддержка javascript, но ни одна из них не используется на других страницах.

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

Что лучше всего работает в этом сценарии?

Опция: 1

Default.htm
jquery.js
default.js

contact.htm
jquery.js
contact.js

Faq.htm
jquery.js
faq.js

Опция: 2

Default.htm
JQuery-умолчанию контакт-чаво-min.js

contact.htm
JQuery-умолчанию контакт-чаво-min.js

Faq.htm
JQuery-умолчанию контакт-чаво-min.js

PS: для всех вас, ребята из asp.net, я использую Combres для объединения, минимизации и версии моих файлов Javascript

Answer 1

Я бы определенно проголосовал за их объединение.Если вас беспокоит время разбора или настройки «неиспользуемого» Javascript, то я бы порекомендовал структурировать ваш Javascript с каждым файлом в замыкании, а затем запустить нужные замыкания на нужных страницах.Например:

// File 1
window.closures = window.closures || {}
window.closures["page1"] = (function() {
  // Javascript for Page 1
});

// File 2
window.closures = window.closures || {}
window.closures["page2"] = (function() {
  // Javascript for Page 2
});    

// File 3
window.closures = window.closures || {}
window.closures["page2"] = (function() {
  // Javascript for Page 2
});

Затем на вашей странице:

<!-- This one combined.js file will be downloaded once and cached //-->
<script type="text/javascript" src="combined.js"></script>
<script>
  // Run the Javascript in your combined.js intended for page2
  window.closures["page2"]()
</script>

Answer 2

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

Answer 3

Если объединенный файл, скажем, сокращен до 25 КБ, то сделайте это. Но если это больше, я бы сказал, определите, кто является самым большим из них, и пусть этот файл JS будет отдельным. Совмещай остальное. То, что лимит 25kb тоже не является жестким правилом, это зависит от вас.

Если ваши индивидуальные файлы имеют размер, скажем, 30 КБ, я бы рекомендовал не объединять их, а разрешать кэширование отдельных файлов js как отдельных файлов js.

Надеюсь, это поможет.

Answer 4

Поскольку не похоже, что есть много javascript, было бы лучше объединить его в один файл.Только если существует значительное количество javascript, которое не нужно загружать, если пользователь не посещает страницу, вы можете хранить файлы отдельно.

Answer 5

Это всегда баланс между количеством HTTP-запросов и ограничением переданных байтов, которые пока не нужны.

Существует три варианта:

1. объединить все в1 файл
2. имеет три отдельных файла и загружает их по мере необходимости
3. имеет три отдельных файла, загружает один необходимый для этой страницы сразу и предварительно загружает другие (когда наступит подходящее время)

Вы узнаете, что лучше всего подходит для вашей ситуации, выполнив некоторое нагрузочное тестирование AB.

Все зависит от размера передаваемых данных, перекрытия необходимых функций и вероятности того, чтонеобходим некоторый функционал.