My<cod/>.net
Рекомендации по управлению и развертыванию больших приложений JavaScript
Каковы некоторые стандартные методы управления приложением среднего размера JavaScript? Меня беспокоит как скорость загрузки браузера, так и простота и ремонтопригодность разработки.
Наш код JavaScript примерно равен "namespaced" как:
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, и браузер все еще имеет дюжину файлов для загрузки.
Часто ли у вас есть несколько файлов "source" JavaScript, которые получают "compiled" в один окончательный сжатый файл JavaScript? Есть еще какие-нибудь полезные советы или рекомендации?
Подход, который я нашел, работает для меня - это иметь отдельные файлы JS для каждого класса (так же, как и в Java, C# и других). Кроме того, вы можете сгруппировать ваш JS в функциональные области приложения, Если вам так проще ориентироваться.
Если вы помещаете все свои файлы JS в один каталог, вы можете использовать серверную среду (например, PHP) для циклического перебора каждого файла в этом каталоге и вывода <script src='/path/to/js/$file.js' type='text/javascript'> в каком-либо заголовочном файле, включенном всеми вашими страницами UI. Эта автоматическая загрузка особенно удобна, если вы регулярно создаете и удаляете файлы JS.
При развертывании в рабочей среде у вас должен быть сценарий, который объединяет их все в один файл JS и "minifies", чтобы уменьшить размер.
Кроме того, я предлагаю вам использовать Google AJAX Libraries API для загрузки внешних библиотек.
Это инструмент разработчика Google, который bundle majors 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");
Есть отличная статья о витамине Кэла Хендерсона из Flickr fame о том, как они оптимизируют доставку своих CSS и JavaScript: http://www.iamcal.com/serving-javascript-fast/
Просто sidenode-Стив уже указал, что вы действительно должны "minify" свои JS файлы. В JS пробелы действительно имеют значение. Если у вас есть тысяча строк JS, и вы убираете только неиспользованные новые строки, вы уже сохранили около 1 тыс. Я думаю, что вы поняли суть.
Для этой работы есть инструменты. И вы никогда не должны изменять "minified"/stripped/obfuscated JS вручную! Никогда!
В наших больших приложениях javascript мы пишем весь наш код в небольших отдельных файлах - по одному файлу на 'class' или функциональную группу, используя структуру пространства имен/каталогов kind-of-like-Java. У нас тогда есть:
- Шаг компиляции, который занимает весь наш код и уменьшает его (используя вариант JSMin), чтобы уменьшить размер загрузки
- Шаг времени компиляции, который берет классы, которые всегда или почти всегда необходимы, и объединяет их в большой bundle, чтобы уменьшить круговые поездки к серверу
- A 'classloader', который загружает остальные классы во время выполнения по требованию.
Для повышения эффективности работы сервера лучше всего объединить все ваши 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?в=7BGvy-S-Iag