Поместить javascript в один .js файл или разбить его на несколько файлов .js?

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

Я также должен отметить, что моя забота - это не только время, которое требуется для загрузки файлов .js, но также и то, как страница замедляется на основе содержимого загруженного файла .js. Например, добавление плагина автозаполнения имеет тенденцию замедлять время отклика на 100 мсек или около того от моего базового тестирования даже при кэшировании. Я предполагаю, что он должен проверять элементы в DOM, которые задерживают эту задержку.

ОТВЕТЫ

Ответ 1

Я думаю, это зависит от того, как часто они меняются. Возьмем этот пример:

  • JQuery: меняйте один раз в год
  • Плагины сторонних разработчиков: изменение каждые 6 месяцев
  • ваш пользовательский код: меняйте каждую неделю

Если ваш пользовательский код составляет всего 10% от общего кода, вы не хотите, чтобы пользователи загружали остальные 90% каждую неделю. Вы разделили бы как минимум 2 js: плагины JQuery + и свой собственный код. Теперь, если ваш собственный код составляет 90% от полного размера, имеет смысл разместить все в одном файле.

При выборе того, как объединить JS файлы (и то же самое для CSS), я балансирую:

  • относительный размер файла
  • Ожидаемое количество ожидаемых обновлений

Ответ 2

Общий, но релевантный ответ:

Это зависит от проекта.

Если у вас есть довольно ограниченный веб-сайт, где большая часть функций повторно используется во многих разделах сайта, имеет смысл помещать все ваши script в один файл.

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

Преимущество разделения script на отдельные файлы заключается в том, что вам не нужно обслуживать пользователей, которым не нужен контент и пропускная способность, которые они не используют. (Например, если они никогда не посещают "Приложение А" на веб-сайте, им не понадобится 100 тыс. script для раздела "Приложение А.", но им понадобятся общие функциональные возможности всего сайта.)

Преимущество сохранения script под одним файлом - это простота. Меньшее количество попаданий на сервер. Меньше загрузок для пользователя.

Как обычно, YMMV. Там нет жесткого правила. Сделайте то, что имеет наибольшее значение для ваших пользователей на основе их использования, и основывается на вашей структуре проекта.

Ответ 3

Если файлы нужны на каждой странице, поместите их в один файл. Это уменьшит количество запросов HTTP и улучшит время отклика (для большого количества посещений).

См. Лучшая практика Yahoo для других советов.

Ответ 4

Я бы в значительной степени согласился с тем, что сказал bigmattyh, это действительно зависит.

Как правило, я стараюсь объединить файлы script как можно больше, но если у вас есть некоторые скрипты, которые используются только на нескольких участках сайта, особенно те, которые выполняют большие обходы DOM при загрузке, было бы целесообразно оставить их в отдельном файле (файлах).
например если вы используете только проверку на своей странице контакта, зачем загружать ее на своей домашней странице?

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

Таким образом, как можно меньше файлов script, в пределах разумного.

Если вы отправляете монолит 100K, но используете только 20K для 80% страниц, подумайте о его разделении.

Ответ 5

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

Ответ 6

В конце дня это зависит от вас.

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

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

Ответ 7

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

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

Ответ 8

Это зависит от того, как пользователи взаимодействуют с вашим сайтом.

Некоторые вопросы для вас:

  • Насколько важно, чтобы ваша загрузка первой страницы была очень быстрой?
  • Обычно пользователи проводят большую часть своего времени в отдельных разделах сайта с подмножествами функциональных возможностей?
  • Вам нужны все сценарии, готовые в тот момент, когда страница готова, или вы можете загрузить их после загрузки страницы, вставив на страницу элементы <script>?

Имея хорошее представление о том, как пользователи используют ваш сайт, и что вы хотите оптимизировать, это хорошая идея, если вы действительно хотите повысить производительность.

Однако мой метод по умолчанию заключается в том, чтобы просто конкатенировать и минимизировать весь мой javascript в один файл. jQuery и jQuery.ui небольшие и имеют очень низкие накладные расходы. Если плагины, которые вы используете, имеют эффект 100 мс на время загрузки страницы, тогда что-то может быть неправильным.

Несколько вещей, чтобы проверить:

  • Включен ли gzipping на вашем HTTP-сервере?
  • Вы генерируете статические файлы с уникальными именами как часть развертывания?
  • Вы обслуживаете статические файлы с бесконечными истечениями кеша?
  • Вы включаете свой CSS в верхней части страницы и ваши сценарии внизу?
  • Есть ли лучший (меньший, более быстрый) плагин jQuery, который делает то же самое?

Ответ 9

Я также думаю, что вы должны пойти по пути с одним файлом, как предложили другие. Однако, к вашему моменту, когда плагины питаются циклами, просто включаясь в ваш большой файл js:

Прежде чем выполнять дорогостоящую операцию, используйте некоторые проверки, чтобы убедиться, что вы даже на странице, требующей операций. Возможно, вы обнаружите присутствие (или отсутствие) dom node перед запуском плагина автозаполнения и только при необходимости инициализируете плагин. Там нет необходимости тратить накладные расходы на обход дома на страницах или разделах, которые никогда не нуждаются в определенной функциональности.

Простой условный до дорогого фрагмента кода даст вам преимущества обоих подходов, которые вы решаете.