Нужно ли складывать много маленьких JS файлов в один большой?

Question

[Eduards Vigulis]

Есть проект на AngularJS, на данный момент в нем около 80 js файлов.
Встал вопрос: нужно ли их складывать в один?
Мой работодатель говорит: "если загрузить асинхронно 10 файлов по 100кб то это будет быстрее чем один 1МБ файл" т.е. складывать ненадо, я же думаю что отдавать JS одним большим куском будет правильнее, но не могу предоставить никаких аргументов чтобы опровергнуть его точку зрения.
Подскажите кто в данной ситуации прав? Как правильнее поступить?

Answer 1

[Сергей Протько]

Если вы используете HTTP2 - то не обязательно, но это врядли.

если загрузить асинхронно 10 файлов по 100кб то это будет быстрее чем один 1МБ файл

А если загружать по 80 файлов по 10кб то это будет медленнее чем 10 файлов по 100кб, так как расходы на установление соединения будут больше чем время ожидания доставки очередной порции данных.

Браузер делает запросы за ресурсами паралельно (можете в дебагере браузера посмотреть, там же информация о том кто блокирует загрузку), так что загрузка нескольких файлов будет быстрее загрузки одного большого. Но, даже с учетом keep alive, браузер не может реюзать полноценно при таком раскладе соединения, и он будет их плодить в большом количестве, и чем больше их, тем больше нагрузка на сервер, тем медленнее будет получаться статика. Так что нужно найти баланс.

Я бы предложил разделить все на:
- angular.js
- vendor.bundle.js - все сторонние модули и прочее
- app.bundle.js - все файлики приложения.

тогда да. асинхронная загрузка будет быстрее.

Comments

[Eduards Vigulis]

Огромное спасибо за понятный и развернутый ответ!

Answer 2

[Денис Инешин]

Не только можно но и нужно:
1. Собирается через Grunt/Gulp
2. Минифицируется
3. Сжимается gzip-ом
4. Кэшируется браузером
5. Использует только 1 реквест на сервер.

При загрузке сайта у разных браузеров есть ограниченное количество одновременно выполняемых запросов (на мобилах вообще мало), кроме того у вас там ведь не только JS файлы, есть еще css, картинки и т.п. Они все встают в очередь на загрузку. Так что, в 99,9% случаев, загрузка одного JS файла будет всегда быстрее чем загрузка нескольких.

Answer 3

[Stalker_RED]

Параллельная загрузка может дать выигрышь только в том случае, если вы не упретесь в максимальное число соединений. А с учетом того, что кроме js файлов нужно грузить еще и css, изображения, и другие ресурсы упереться в лимит довольно легко.
Вот не очень свежий (~два года назад) но список поддерживаемого кол-ва соединений onedev.net/post/231

Answer 4

[Глюкъ Виртуален]

работодатель говорит: "если загрузить асинхронно 10 файлов по 100кб то это будет быстрее чем один 1МБ файл"

Работодатель тупенький, это нормально.

Аргумент простой: создайте 1000 файлов на диске, общим весом в Х мегабайт.
Создайте рядом один файл таким же весом.
Предложите работодателю скопировать то и другое по очереди. И сравнить время.
Думаю, этого эксперимента хватит даже для самых упоротых.