Подгрузка JS. Все вместе или по отдельности?

Question

[Виталий]

Доброго времени суток. Предположим, есть крупный сайт. На странице регистрации есть маска ввода для input, которая обрабатывается какой то библиотекой.
Стоит ли тягать эту библиотеку в общем JS файле, или оптимальнее ее подгружать только там, где она непосредственно используется ?

Answer 1

[Mysterion]

оптимальнее ее подгружать только там, где она непосредственно используется

Answer 2

[lem_prod]

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

Answer 3

[Евгений Вольф]

Стоит ли тягать эту библиотеку в общем JS файле, или оптимальнее ее подгружать только там, где она непосредственно используется ?

Зависит от того, как часто пользователи попадают на эту страницу (т.е. как часто эта библиотека им нужна) и того, сколько она занимает и какой протокол (HTTP/1.x или HTTP/2) используется и прочих факторов. HTTP/2 по сути, решает проблему "множества коннектов" из-за которой приходилось сокращать по возможности кол-во файлов, собирать картинки в спрайты (хотя, со спрайтами - были и другие причины) и так далее.

Я обычно, склеиваю JS либо в 1 файл (хотя, последнее время специально я этого не делаю, это делают разнообразные оптимизаторы уровня сервера, в т.ч. самописные), либо по группам (в зависимости от типа проекта) и гружу их асинхронно. Это позволяет не замедлять загрузку страниц и иногда решает проблему порядка загрузки скриптов. Так же, такой подход позволяет сократить накладные расходы на ~0.1% даже с протоколом HTTP/2 за счёт сокращения файлов на диске, кол-ва запросов и сокращения кол-ва промежуточного трафика, в виде HTTP-заголовков и т.д.)... но, это не особо значительная экономия, если у вас HTTP/2.

Answer 4

[Александр Таратин]

ИМХО удобнее всего использовать webpack и динамическую подгрузку модулей
https://www.youtube.com/watch?v=Om6yGdU_YlQ&list=P... (лучше просмотреть весь плейлист, если не знакомы с webpack)
https://webpack.github.io/docs/code-splitting.html

Comments

[Юрий]

так с вебпаком придется также либо разбивать билд на несколько js output либо пихать все в один файл. в итоге вопрос у человека остался тем же, только еще зачем то вебпак пришлось впендюрить ;)

[Александр Таратин]

Юрий: Удобства ради, ибо непонятно что там за библиотека, и от чего она зависит. Webpack же сам аккуратно разрулит все зависимости и скомпонует нужные бандлы.
+Нам не нужно думать на каких страницах нужно подключать бандл с маской и каким образом его грузить - просто обернули нужный код в ensure и готово.

[Юрий]

Александр Таратин: кейс у ТС. jquery + jquery plugin. там тоже ума много не надо.
но вот с енсюр непонятно как он будет грузится, вы отдаете решение этого вопроса другим людям, и не факт что система сама сделает как лучше. когда засунул голову в песок, и не видишь опасность, это не значит что ее уже нет.

это так к слову. вебпак несоменно имеет свою зону применения.