javascriptjavascriptweb-applicationsdeployment

Рекомендации по управлению и развертыванию больших приложений JavaScript

просмотры: 9.1K

Каковы стандартные методы управления средним и большим приложением 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? Есть ли другие полезные советы или лучшие практики?

Источник

Ответов (7)

Решение

Подход, который я нашел, работает для меня, заключается в наличии отдельных файлов JS для каждого класса (так же, как в Java, C# и других). В качестве альтернативы вы можете сгруппировать свой JS в функциональные области приложения, если вам будет легче ориентироваться.

Если вы поместите все свои JS-файлы в один каталог, вы можете настроить серверную среду (например, PHP) через цикл по каждому файлу в этом каталоге и вывести a <script src='/path/to/js/$file.js' type='text/javascript'> в каком-то файле заголовка, который включается всеми вашими страницами пользовательского интерфейса. Вы найдете эту автоматическую загрузку особенно удобной, если вы регулярно создаете и удаляете файлы JS.

При развертывании в производственной среде у вас должен быть сценарий, который объединяет их все в один JS-файл и «минимизирует» его, чтобы уменьшить размер.

Источник

Моя стратегия состоит из двух основных приемов: модулей AMD (чтобы избежать десятков тегов скриптов) и шаблона модуля (чтобы избежать тесной связи частей вашего приложения).

Модули AMD: очень простые, см. Здесь: http://requirejs.org/docs/api.html, также он может упаковать все части вашего приложения в один миниатюрный файл JS: http://requirejs.org/docs/ optimisation.html

Шаблон модуля: я использовал эту библиотеку: https://github.com/flosse/scaleApp , теперь вы спрашиваете, что это? дополнительная информация здесь: http://www.youtube.com/watch?v=7BGvy-S-Iag

Источник

Просто побочный элемент - Стив уже указывал, что вам действительно следует «минимизировать» свои JS-файлы. В JS действительно важны пробелы. Если у вас есть тысячи строк JS и вы удаляете только ненужные символы новой строки, вы уже сохранили около 1 КБ. Я думаю, вы поняли.

Для этой работы есть инструменты. И вы никогда не должны изменять "уменьшенный" / вырезанный / запутанный JS вручную! Никогда!

Источник

Для повышения эффективности сервера лучше всего объединить весь ваш javascript в один минифицированный файл.

Определите порядок, в котором требуется код, а затем поместите минимизированный код в том порядке, в котором он требуется, в одном файле.

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

Я бы рекомендовал разделить файлы для разработки, а затем создать сценарий сборки для объединения / компиляции всего.

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

Источник

В наших больших javascript-приложениях мы пишем весь наш код в небольших отдельных файлах - по одному файлу на «класс» или функциональную группу, используя структуру пространств имен / каталогов, подобную Java. Тогда у нас есть:

  • Шаг во время компиляции, который берет весь наш код и минимизирует его (с использованием варианта JSMin) для уменьшения размера загрузки.
  • Шаг во время компиляции, который берет классы, которые всегда или почти всегда необходимы, и объединяет их в большой пакет, чтобы уменьшить количество обращений к серверу.
  • «Загрузчик классов», который загружает оставшиеся классы во время выполнения по запросу.
Источник

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

Единственная причина, по которой я бы не стал объединять файлы, состоит в том, что мне не нужны все файлы на всех страницах.

Источник

Кроме того, я предлагаю вам использовать API библиотек AJAX от Google для загрузки внешних библиотек.

Это инструмент разработчика 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");
Источник