В чем преимущества конкатенации всех файлов Javascript в один файл перед отправкой его клиенту?

Например, если у вас естьВ чем преимущества конкатенации всех файлов Javascript в один файл перед отправкой его клиенту?

<body> 
    <script src="someLibrary.js"></script> 
    <script src="someLibrary2.js"></script> 
    <script src="someLibrary3.js"></script> 
    <script src="someLibrary4.js"></script> 
    <script src="myApp"></script> 
</body>

Какая польза в стороне от красивости в HTML, чтобы имеющие все те, которые сцепляются и уменьшенная на задаче выполняется (Grunt/Gulp) перед его отправкой клиенту в форме от

<body> 
    <script src="allTheJavascripts.js"></script> 
</body>

источник

2015-04-15 Brian Schermerhorn

Меньше запросов от клиента на сервер ..? – DontVoteMeDown

Объединение нескольких файлов JS в один файл имеет следующие преимущества:

Браузеры могут скачать один файл более эффективно и быстрее, чем загружать несколько файлов меньшего размера. Одно HTTP-соединение, загружающее файл, обычно быстрее, чем многие HTTP-соединения, загружающие файлы меньшего размера.
У браузера есть ограничение на количество одновременных подключений, которые он сделает в том же домене, и, если он достигнет этого предела, некоторые соединения должны ждать, пока другие не закончат. Это вызывает задержки при загрузке. Скачивание меньшего количества файлов делает его менее вероятным для достижения этого предела. Эти ограничения распространяются на все подключения к домену (загрузка JS-файлов, загрузка файлов CSS, загрузка фреймов, ajax-звонков и т. Д.).
Масштабируемость сервера может быть увеличена, потому что для загрузки каждой страницы требуется меньше http-соединений для обслуживания контента.
Бывают случаи, когда контроль версий и взаимодействие между обновлениями версий и просмотром кеширования JS-файлов могут быть проще с одним большим JS-файлом. Когда все ваши JS-файлы объединены, вы можете назначить один номер версии для этого объединенного JS-файла (например, jQuery с его версиями). Тогда любое изменение JS в любом месте вызывает ошибку в номере версии для главного комбинированного файла. Поскольку данный браузер получает весь объединенный файл все или ничего, никогда не будет возможности для браузера случайно получить одну версию одного файла с сервера и другую версию другого файла из устаревшего кеша браузера. Кроме того, сохранение одного номера версии мастера намного проще, чем управление версиями большого количества небольших файлов.

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

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

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

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

И некоторые минусы объединения и минимизации:

Непосредственно отладки свернутого сайт может быть довольно сложно, как многие символы потеряли свои значимые имена. Я обнаружил, что для отладки/устранения неполадок часто требуется использовать неограниченную версию сайта (или, по крайней мере, некоторые файлы).
Сообщения об ошибках в браузерах будут ссылаться на объединенный/сведенный к минимуму файл, а не на фактические исходные файлы, поэтому может быть сложнее определить, какой код вызывает указанную ошибку браузера, о которой сообщалось.
Комбинированный и минимизированный сайт должен быть протестирован, чтобы убедиться, что эти дополнительные действия не вызвали никаких проблем.

источник

2015-04-15 18:19:33 jfriend00

Отличный ответ. Мысль: не работает ли SourceMaps с проблемой отладки? Было бы полезно расширить этот ответ с информацией о них ... – sidewinderguy

Просто любопытно, почему нисходящий поток был применен здесь через 1,5 года после того, как был отправлен ответ? Ответы могут быть улучшены, если downvoters оставить комментарий о том, почему они считают, что это стоит downvote. – jfriend00

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

То же самое верно для файлов CSS.

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

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

источник

2015-04-15 17:55:02

Очень просто:

Снижение Латентность (1 файл означают один HTTP GET) торговал потраченного пропускной способности и ненужного потребления ресурсов памяти. (Скрипты необходимо загружать, анализировать, выполнять, даже если не нужно)
Сложнее отлаживать (1 импорт) и читать легче.

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

источник

2015-04-15 17:57:32

Комбинированные файлы на самом деле не так сложно отлаживать, хотя файлы с мини-файлами. –

Когда люди объединяются, они обычно минифицируют. Так что, хотя cominbing не «настолько», что это сложнее, это некоторые. Тогда, когда вы считаете, что оба вместе идут вместе, вам значительно труднее. В процессе разработки пользовательского интерфейса латентность - это метрика. –

Несомненно, но вопрос не спрашивал о минимизации, поэтому в контексте вопроса 2 вопрос не очень важен. –

В чем преимущества конкатенации всех файлов Javascript в один файл перед отправкой его клиенту?

ответ

Смежные вопросы