Загрузка асинхронного сценария

Question

Я разрабатываю приложение Node.JS. Мой клиентский javascript - около 1.000 LoC, плюс 3 библиотеки. Я уменьшил и объединил файлы javascript в файл размером 150kb (50kb gzipped).

Интересно, в какой точке размера файла было бы разумно подумать об использовании AMD, require.js или аналогичного.

Answer 1

Короткий ответ: ~ 100-150kb будет очень большим предупреждающим знаком, но размер файла не является единственным индикатором. Кроме того, необходимо проверить, отвечает ли загрузочная способность блоков и загрузка пользовательского интерфейса, и сколько (посмотрите на сетевую панель в devtools Chrome) важно для принятия правильного решения.

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

150kb файл много (в качестве примера ваш 50kb gzipped настолько менее страшный), но если загрузка js-файла не блокирует визуализацию пользовательского интерфейса, размер файла меньше проблем. Я имею в виду, что если пользователь не замечает задержку загрузки страницы, проблема с размером файла не возникает. Кроме того, если это так, вы можете рассмотреть использование атрибута асинхронного тега. Это, конечно, недействительно для приложений, построенных на клиентских платформах, таких как угловые или ExtJ, поскольку js предоставляет интерфейс.

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

Если весь код необходим заранее (это редко бывает), то AMD, вероятно, не для вас.

Если ваше приложение имеет, скажем, диалоговое окно статистики, в котором используется много уникального кода, но только 20% пользователей нажимают на открываемую кнопку и эта кнопка находится на странице настроек, а затем загружает все ее код с помощью все остальное на каждой другой странице - это отходы и лучше делать это на странице настроек или при нажатии кнопки, если страница настроек отсутствует (или даже когда мышь над кнопкой).

Понимание шаблонов использования и сроков является ключевым критерием.

Эти две статьи очень интересны и могут помочь в принятии некоторых решений развертывания: https://alexsexton.com/blog/2013/03/deploying-javascript-applications/ http://tomdale.net/2012/01/amd-is-not-the-answer/

А также, если вы все еще хотите, чтобы загрузить все в одном requireJs файлов также имеет это оптимизатор инструмент стоит посмотреть: http://requirejs.org/docs/optimization.html