Самый эффективный способ загрузки браузером ресурсов

Question

В настоящее время я использую Angular с ng-routes, ng-table и ng-animate. Я также использую другие библиотеки, такие как jQuery и Modernizr. Наконец, у меня есть свой собственный javascript, который может быть несколькими файлами.

Так что мои проекты загрузить длинный список ресурсов, как это:

<script type="text/javascript" src="/lib/jquery.min.js"></script> 
<script type="text/javascript" src="/lib/modernizr.min.js></script> 
<script type="text/javascript" src="/lib/angular.min.js"></script> 
<script type="text/javascript" src="/lib/angular-route.min.js"></script> 
<script type="text/javascript" src="/lib/angular-animate.min.js"></script> 
<script type="text/javascript" src="/js/custom.js"></script> 

Я знаю, что я могу ускорить свои проекты за счет сокращения HTTP вызовов и сжатие всех файлов.

Я использую CodeKit, который дает возможность импортировать JS-файлы друг в друга и скомпилировать их в один сжатый файл. Если я сделаю это для приведенного выше списка я бы тогда просто загрузить один файл, как это:

<script type="text/javascript" src="/js/main.min.js"></script> 

Единый HTTP вызов, а не 6+, и весь код минимизирован. Проблема здесь в том, что один файл 500kb + и будет намного больше в полном проекте, возможно, более 1 Мб.

• Означает ли это, что файл не будет кэшироваться браузерами, потому что он слишком велик?
• Уязвимы ли у угловых или других библиотек какие-либо проблемы при компиляции в этом формате? (консоль выдает ошибки, если файл .map находится не в том же каталоге)
• Уверен, что файл 500kb + по-прежнему занимает много времени, так что это действительно увеличит время загрузки?

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

Answer 1

Означает ли это, что файл не будет кэшироваться браузерами, потому что он слишком велик?

Это зависит от браузера. Настольные браузеры не должны иметь никаких проблем с этим, однако мобильная.

Уязвимы ли у угловых или других библиотек при компиляции в этом формате? (консоль выдает ошибки, если файл .map находится не в том же каталоге)

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

Уверен, что файл 500kb + по-прежнему занимает много времени, поэтому это действительно увеличит время загрузки?

Да, поскольку вы не передаете файлы cookie и http заголовки взад и вперед с каждым запросом.

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

Файлы, которые нужны немедленно, и файлы, которые могут быть загружены позже.

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

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

---

Это дает вам только один реальный вариант: уменьшите общий размер содержания, которое вы включаете. Это означает, что контроллеры и службы могут использоваться как можно более многоразовые, и не включать код, который не является необходимым. Глядя на ваш пример, вы включаете jQuery. Цель jQuery заключается в том, чтобы упростить запись ajax-запросов и выбирать/манипулировать узлами DOM, оба из которых уже покрыты Angular. Поэтому вы можете уменьшить размер вашей кодовой базы, удалив jQuery и вместо этого используя плагины с угловым основанием.