Рекомендации по управлению и развертыванию больших приложений на JavaScript
-
08-06-2019 - |
Вопрос
Каковы некоторые стандартные методы управления JavaScript-приложением среднего размера?Меня беспокоит как скорость загрузки браузера, так и простота и ремонтопригодность разработки.
Наш код JavaScript примерно "распределен по именам" следующим образом:
var Client = {
var1: '',
var2: '',
accounts: {
/* 100's of functions and variables */
},
orders: {
/* 100's of functions and variables and subsections */
}
/* etc, etc for a couple hundred kb */
}
На данный момент у нас есть один (распакованный, необработанный, легко читаемый) файл JavaScript для обработки всей бизнес-логики веб-приложения.Кроме того, существует jQuery и несколько расширений jQuery.Проблема, с которой мы сталкиваемся, заключается в том, что для этого требуется навсегда чтобы найти что-либо в коде JavaScript, в браузере все еще есть дюжина файлов для загрузки.
Часто ли бывает несколько "исходных" файлов JavaScript, которые "компилируются" в один конечный сжатый файл JavaScript?Есть еще какие-нибудь полезные советы или рекомендации?
Решение
Подход, который, как я обнаружил, работает для меня, заключается в создании отдельных JS-файлов для каждого класса (точно так же, как вы бы делали в Java, C # и других).В качестве альтернативы вы можете сгруппировать свой JS по функциональным областям приложения, если вам так проще ориентироваться.
Если вы поместите все свои JS-файлы в один каталог, вы можете заставить свою серверную среду (например, PHP) перебирать каждый файл в этом каталоге и выводить <script src='/path/to/js/$file.js' type='text/javascript'>
в каком-нибудь заголовочном файле, который включен во все ваши страницы пользовательского интерфейса.Вы найдете эту автоматическую загрузку особенно удобной, если вы регулярно создаете и удаляете JS-файлы.
При развертывании в производство у вас должен быть скрипт, который объединяет их все в один JS-файл и "минимизирует" его, чтобы уменьшить размер.
Другие советы
Кроме того, я предлагаю вам воспользоваться услугами Google API библиотек AJAX для того, чтобы загрузить внешние библиотеки.
Это инструмент Google для разработчиков, который объединяет основные библиотеки JavaScript и упрощает их развертывание, обновление и облегчение, всегда используя сжатые версии.
Кроме того, это упрощает и облегчит ваш проект, поскольку вам не нужно загружать, копировать и поддерживать файлы библиотек тезисов в вашем проекте.
Используйте это таким образом :
google.load("jquery", "1.2.3");
google.load("jqueryui", "1.5.2");
google.load("prototype", "1.6");
google.load("scriptaculous", "1.8.1");
google.load("mootools", "1.11");
google.load("dojo", "1.1.1");
Есть отличная статья о Vitamin Кэла Хендерсона из Flickr fame о том, как они оптимизируют доставку своих CSS и JavaScript: http://www.iamcal.com/serving-javascript-fast/
Просто боковой код - Стив уже указывал, что вам действительно следует "минимизировать" свои JS-файлы.В JS пробелы действительно имеют значение.Если у вас есть тысяча строк JS и вы удаляете только ненужные новые строки, вы уже сохранили около 1 тыс.Я думаю, вы поняли, в чем дело.
Для этой работы есть инструменты.И вы никогда не должны изменять "уменьшенный" / урезанный / запутанный JS вручную!Никогда!
В наших больших приложениях на javascript мы записываем весь наш код в небольшие отдельные файлы - по одному файлу на "класс" или функциональную группу, используя структуру пространства имен / каталогов, подобную Java.Тогда мы имеем:
- Этап компиляции, который берет весь наш код и минимизирует его (используя вариант JSMin), чтобы уменьшить размер загрузки
- Этап компиляции, который берет классы, которые всегда или почти всегда необходимы, и объединяет их в большой пакет, чтобы сократить количество обходов сервера
- "Загрузчик классов", который загружает остальные классы во время выполнения по требованию.
Для повышения эффективности сервера лучше всего объединить весь ваш javascript в один уменьшенный файл.
Определите порядок, в котором требуется код, а затем поместите сокращенный код в том порядке, в каком он требуется, в один файл.
Ключ в том, чтобы уменьшить количество запросов, необходимых для загрузки вашей страницы, именно поэтому у вас должен быть весь javascript в одном файле для работы.
Я бы рекомендовал разделить файлы для разработки, а затем создать скрипт сборки, чтобы объединить / скомпилировать все.
Кроме того, в качестве хорошего эмпирического правила убедитесь, что вы включили JavaScript в конце своей страницы.Если JavaScript включен в заголовок (или где-либо в начале страницы), он остановит выполнение всех других запросов до тех пор, пока он не будет загружен, даже если включена конвейерная обработка.Если это будет в конце страницы, у вас не возникнет этой проблемы.
Прочтите код других (хороших) приложений на javascript и посмотрите, как они справляются с задачами.Но я начинаю с файла для каждого класса.Но как только он будет готов к производству, я бы объединил файлы в один большой файл и сократил.
Единственная причина, по которой я бы не объединял файлы, заключается в том, что мне не нужны все файлы на всех страницах.
Моя стратегия состоит из 2 основных приемов:Модули AMD (чтобы избежать десятков тегов скрипта) и шаблон модуля (чтобы избежать тесной связи частей вашего приложения)
Модули AMD:очень прямолинейно, смотрите здесь: http://requirejs.org/docs/api.html кроме того, он способен упаковать все части вашего приложения в один уменьшенный JS-файл: http://requirejs.org/docs/optimization.html
Шаблон модуля:я пользовался этой Библиотекой: https://github.com/flosse/scaleApp теперь вы спрашиваете , что это ?больше информации здесь: http://www.youtube.com/watch?v=7BGvy-S-Iag