Как использование Bower улучшит первую загрузку моей веб-страницы

Question

Я пытаюсь понять и выяснить лучший подход при добавлении ссылок на внешние библиотеки переднего плана, такие как bootstrap, angularjs, ui-router и т. Д., В мой файл index.html из моего приложения SPA и angularJS.Причиной этого является то, что при первой загрузке со стороны клиента это действительно занимает много времени и даже больше, когда есть плохое подключение к Интернету.

На данный момент я знаю, что существуют следующие методы достижения одной и той же цели:

1. Развертывание загруженных библиотек на сервер : загрузка библиотек впапку внутри моего проекта и ссылки на них из моего index.html файла.Затем они отправятся на рабочий сервер и будут загружены при первом открытии веб-страницы.
2. Ссылка на библиотеки, размещенные в облаке, или CDN (Content Delivery Network) CDN . Я знаючто выполнение этого процесса просто означает обращение к файлам (если они доступны в CDN) путем добавления URL-адреса вместо маршрута из библиотеки внутри моего проекта.Я предполагаю, что это поможет мне сэкономить место на моем сервере, но поможет ли это ускорить загрузку при первом доступе к SPA?
3. Использование менеджера пакетов переднего плана (bower) : Я понимаю, что когда я добавляю библиотеку, у меня есть возможность настроить файл bower.json, который ссылается на все мои библиотеки переднего плана.Требуется выполнить команду bower install, чтобы ссылка появилась в bower.json.Затем, в соответствии с этим Управляйте своими зависимостями веб-интерфейса с помощью Bower , в нем говорится, что я могу контролировать версии из библиотек, устанавливать их и даже изменять файл или каталог, в котором будут находиться файлы.загружается при их установке. Смогу ли я ускорить загрузку с клиентской стороны приложения или это было бы просто полезно, чтобы избежать интенсивной загрузки при клонировании репо?

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

Буду очень признателен за любые советы и помощь.Спасибо!

Answer 1

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

2. CDN быстрые, потому что они обычно хорошо распределены.Недостатком является то, что если CDN выходит из строя (довольно редко), то же самое касается и вашего SPA.

3. Bower абсолютно ничего не делает для повышения скорости загрузки библиотек.Это просто удобный организационный инструмент для отслеживания версий библиотек, которые вы используете в своем проекте.

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

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

Answer 2

Я полагаю, что вариант 1 не используется, потому что стало бы очень трудно управлять и сделать приложение трудным для портирования.

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

Вариант 3, я считаю, лучше, потому что, как вы упомянули, он обеспечивает мобильностьприложения, а также хороший контроль версий.Еще одним ключевым преимуществом является то, что вы можете предварительно обработать весь код вашей библиотеки, используя Grunt / Webpack / etc.загружая все зависимости во время сборки, минимизируя, уродлив и объединяя весь библиотечный код в один файл, например vendor.js, таким образом уменьшая количество HTTP-запросов до одного и обслуживая этот код в наиболее сжатом формате.Также доступны дополнительные оптимизации, такие как gzip, размещение всего вашего vendor.js на CDN, кэширование, предварительная выборка и многие другие, я уверен.