Как соединить js файлы

Обновлено: 05.07.2024

Я хочу создать скомпилированный файл JavaScript для моего сайта. Для разработки я бы предпочел сохранить JavaScript в отдельных файлах и просто как часть моих автоматических скриптов объединить файлы в один и запустить компрессор над ним.

моя проблема в том, что если я использую старую команду копирования DOS, она также помещает маркеры EOF, на которые жалуется компрессор:

копировать /A *.в JS компилировать.js / Y

Что делают другие люди?

Я рекомендую использовать Apache Ant и Yui компрессор.

Поместите что-то подобное в xml сборки Ant. Он создаст два файла, приложение.js и применение-мин.js.

для копирования без EOF используйте двоичный режим:

Если результирующий файл все еще имеет доказательства, это может быть из одного из исходных файлов, это может быть исправлено этим вариантом:

/a удаляет конечные доказательства из исходных файлов, если таковые имеются, и / B предотвращает добавление EOF в результирующий файл. Если EOF не находится в конце, исходный файл будет усечен в нем. Порядок переключателей важен. Если вы пишете

- доказательства в исходных файлах не будет удален, но все равно результирующий EOF не будет добавлен.

попробуйте сами, вот где я его получу. Команды DOS странные.

установите компрессор uglifyjs на вашем компьютере:

затем следующую команду можно использовать для объединения и сжатия всех файлов js.

мы создали механизм, состоящий из следующих частей:

Это может быть слишком много для ваших потребностей, но как ответить на ваш вопрос, что делают другие, вот как это работает:

все это разбито на отдельные службы. Существует служба кэша, введенная в службу jsminificationwriter. Это использует оригинальную minificationservice, которая исключительно заботится о правилах минификации.

Что приятно в этом подходе:

  • это заставляет наши команды разработчиков думать в "пакетах" js/css и, следовательно, правильно разделять функциональность и распространять их по страницам, которые их требуют.
  • во время разработки вы прекрасно можете отлаживать, получая правильные файлы и номера строк.
  • вы можете подключить любой другой реализация услуг минификации, таких как YUI и так далее. JsMin был только нашим первым дублем.
  • Это общий подход, который работает для разных типов контента.

надеюсь, что это помогает. Я могу опубликовать некоторые фрагменты кода, чтобы проиллюстрировать это больше, если хотите.

Это очень старый вопрос, но я хочу упомянуть, что есть также способы объединить javascript с помощью javascript! с nodejs, очевидно. Например, есть инструменты, опубликованные как модули npm, такие как этой а также грунт и залпом тоже Плагины.


Эпоха тёплого лампового WEB 1.0 давно прошла, и в последнее время мы имеем дело со страницами, которые кишат так называемой динамичностью. Динамичность может быть обеспечена при помощи JavaScript, VbScript и плагинами вроде Java, Flash, Silverlight. В этой статье я хочу затронуть одну из возможных оптимизаций web-сайта — объединение всех javascript файлов в один.

Зачем?

  1. Повышение скорости загрузки страницы.
  2. Снижение нагрузки на сервер.

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

  • Обернуть все файлы анонимными функциями, которые нужно будет вызывать единожды, по мере необходимости. Либо писать модульный код, где каждый файл может содержать 1 или несколько модулей, которые сами по себе не запускаются.
  • Весь код каждого файла поместить в строку, которую eval-ить по первому требованию.


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


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


Вовсе не приводит к window.some !== undefined; Функция some определяется в области видимости (scope) анонимной функции, а вовсе не window, как это было бы, если бы она была определена в отдельном файле. Решение этой проблемы нашлось в jQuery. Дело в том, что выполнить javascript-код в глобальной области видимости можно используя:


В зависимости от браузера мы вызываем либо execScript, либо запускаем привычный нам eval, задавая ему this равным window. Такой подход используется в jQuery начиная с версии 1.6. В более ранних версиях создавался тег script, в который помещался нужный код, и этот скрипт прикреплялся к документу.

Сжатие и обфускация

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

Компоновка

Отладка

Жизнь программиста была бы прекрасна, если бы не многочисленные баги, которые имеют привычку появляться не вовремя и хорошо прятаться. Тут наша с вами затея терпит крах по всем фронтам. Наш код нечитаем, firebug на нём виснет, и ошибки указывают невесть куда. К тому же большинство переменных имеют вид a, b, c. На помощь к нам приходит Сhrome. Дело в том, что он умеет «де-обфусцировать» код до вполне читабельного состояния (контекстное меню во вкладке Scripts). Например:


Результат весьма далёк от оригинала, но такое уже можно хотя бы прочитать. К сожалению есть некоторые проблемы с постановкой точек останова и их срабатыванием. Но на безрыбье и рак рыба. Жить можно.

Финальный штрих


Использоване

Локально работать с «единым файлом» чертовски неудобно, поэтому можно написать примерно такой велосипед:

Разумеется, вариантов реализации подключения скрипта может быть множество. Да и этот можно улучшить. Например, поставив движок сайта на «событийную основу». Т.е. выполнять какой-либо код только тогда, когда выполнился ряд условий, например: были загружены все требуемые модули.

В последнее время стало модно объединять все внешние JavaScript-файлы вашего сайта в один большой, загружаемый один раз и навсегда. Это, скажем прямо, хорошо — браузер не делает сто миллионов запросов на сервер для отображения одной страницы 1 , скорость загрузки повышается, пользователи счастливы, разработчики отдыхают.

Как всегда, в бочке меда есть ложка дегтя — в объединенный файл в этом случае попадает много того, что при первом запросе можно было бы и не загружать. 2 (Здесь должна была быть ссылка на хабратопик с соответствующим обсуждением. Успешно потеряна.) Чаще всего для борьбы с этим предлагают выкидывать ненужные части руками. Лично у меня перспектива каждый раз перелопачивать несколько десятков (а то и сотен 3 ) килобайт JavaScript кода вызывает острое нежелание работать — а у вас?

Описание простейшего алгоритма разрешения зависимости между модулями.

Конструктивные предложения

Предложение первое: разобрать используемый вами фреймворк на составные части. JSON — отдельно, AJAX — отдельно, работа с DOM — отдельно, формы — отдельно. После этого задача «выкидывания ненужного» превращается в задачу «собери только нужное». Несомненный плюс — результат сборки стал меньше. Несомненный минус — если что-то из «нужного» забыто, все перестает работать.

Предложение третье: сохранить информацию о том, какие именно модули нужны сайту в целом. Используется ли AJAX? Если ли формы? Какие-то необычные элементы управления?

Предложение четвертое: подумать, и заставить работать машину.

Теория

С формальной точки зрения, после того, как первый и второй шаг выполнены, у нас появляется дерево 4 зависимостей. Например. (не стреляйте в пианиста — пример высосан из пальца).

На третьем шаге мы выбираем непосредственно нужные сайту вершины. Пусть это будут dom.js и animated.pane.js. Теперь дело техники обойти получившийся набор деревьев в глубину

. удалить повторяющиеся элементы:

и слить соответствующие модули воедино.

Немножко практики

Как хранить информацию о зависимостях?

Лично я предпочитаю добавлять в «модули» служебные комментарии:

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

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

К чему мы пришли?

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

Итак, мы оставили нового пользователя наедине с единственным JS-файлом, не включающем ничего лишнего. Стал ли при этом пользователь счастливее? Ничуть. Наоборот, в среднем пользователь 5 стал более несчастным, чем раньше, а причина этому — увеличившееся время загрузки страницы.

Приятная теория

  1. время отсылки запроса на сервер T1 — для большинства 6 запросов величина практически постоянная;
  2. время формирования ответа сервера — для статических ресурсов, которые мы сейчас и рассматриваем, пренебрежимо мало;
  3. время получения ответа сервера T2, в свою очередь состоящее из постоянной для сервера сетевой задержки L и времени получения ответа R, прямо пропорциональному размеру ресурса.

В свою очередь, время загрузки страницы будет состоять из времени загрузки HTML-кода и всех внешних ресурсов: изображений, CSS и JS файлов. Основная проблема в том, что CSS и JS-файлы грузятся последовательно 7 . В этом случае общение с сервером выглядит так:

Общие временные затраты при этом составят 3(T1+L) + R(A+B+C).

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

Очевидна экономия в 2(T1 + L).

Для 20ти ресурсов эта экономия составит уже 19(T1 + L). Если взять достаточно типовые сейчас для домашнего / офисного интернета значения скорости в 256 кбит/с и пинга

20–30 мс, получим экономию в 950 мс — одну секунду загрузки страницы. У людей же, пользующихся мобильным или спутниковым интернетом с пингом более 300 мс, разницы времен загрузки страниц составит 6–7 секунд.

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

Суровая реальность

Хотели как лучше, а получилось как всегда.

Пусть у нашего сайта есть три страницы P1, P2 и P3, поочередно запрашиваемые новым пользователем. P1 использует ресурсы A, B и C, P2 — A, С и D, а P3 — A, С, E и F. Если ресурсы не объединять, получаем следующее:

  • P1 — тратим время на загрузку A, B и C
  • P2 — тратим время на загрузку только D
  • P3 — тратим время на загрузку E и F

Если мы слили воедино абсолютно все JS-модули сайта, получаем:

  • P1 — тратим время на загрузку (A+B+C+D+E+F)
  • P2 — внешние ресурсы не требуются
  • P3 — внешние ресурсы не требуются

Результатом становится увеличение времени загрузки самой первой страницы, на которую попадает пользователь. При типовых значениях скорости/пинка мы начинаем проигрывать уже при дополнительном объеме загрузки в 23 килобайта.

Если мы объединили только модули, необходимые для текущей страницы, получаем следующее:

  • P1 — тратим время на загрузку (A+B+C)
  • P2 — тратим время на загрузку (A+C+D)
  • P3 — тратим время на загрузку (A+С+E+F)

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

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

Решение

— можно ли проглотить бильярдный шар?
— можно, но, как правило, не нужно.

Конечно же, выход из сложившегося положения есть 8 . В большинстве случаев для получения реального выигрыша достаточно выделить «ядро» — набор модулей, используемых на всех (или по крайней мере на часто загружаемых) страницах сайта. Например, в нашем примере достаточно выделить в ядро ресурсы A и B, чтобы получить преимущество:

  • P1 — тратим время на загрузку (A + B) и C
  • P2 — тратим время на загрузку D
  • P3 — тратим время на загрузку (E + F)

Вдумчивый читатель сейчас возмутится и спросит: «А что, если ядра нет? Или ядро получается слишком маленьким?». Спешу заверить — это легко 5 решается вручную выделением 23 независимых групп со своими собственными ядрами. При желании задачу разбиения можно формализовать и получить точное машинное решение — но это обычно не нужно; руководствуясь простейшим правилом — чем больше ядро, тем лучше, можно добиться вполне приличного результата.

Как говорят на Хабре: «Каков же месседж этой статьи?» Ограничимся жалкими тремя пунктами:

  • бездумное следование модным веяниям приведет к бесполезной работе;
  • модные веяние часто несут в себе неплохие идеи;
  • если вы любите своих пользователей — объединяйте ресурсы с умом.

1 При правильно настроенном кэшировании (наличии 'Expires') эти запросы будут отправлены только при первой загрузке страницы. Тем не менее, встречают по одёжке.

2 Например, весь Prototype целиком, вместо отдельно взятых функций '$' и '$$', ага.

3 Вы не пользуетесь JS-фреймворком (пусть даже велосипедом собственного изобретения)?

4 На самом деле не дерево, а DAG (Направленный Ациклический Граф) — я просто не знаю правильного русскоязычного термина. Ах да, если у вас в зависимостях получились циклы — что-то где-то было разбито неправильно.

5 с пустым кэшем, конечно.

6 подразумевается, что большая часть запросов — это GET-запросы с разумной длиной URL. Длина такого запроса примерно постоянна, и составляет

7 по крайней мере, пока они находятся на одном хосте.

8 и, что приятно видеть из комментов, используется.

9 «У нас есть такие приборы — но мы вам про них не расскажем». Придется поверить на слово.

О формате JS
Полное имя файла JS: JAVA SCRIPT. В настоящее время наиболее широко используемый язык сценариев. Вначале JS - это простой язык сценариев для разработки небольших функций в браузере. Теперь от простого к мощному, от внешнего интерфейса до внутреннего, от сценария к компилируемому, JS стал основным языком разработки.
JS-файл хранилища файлов JSSCRIPT, хранящийся в текстовом режиме.
Особенности языка JS: сценарий, выполнение объяснения, объектно-ориентированный, простой, динамический, кроссплатформенный.

Для фронтенд-разработчика сжатие и объединение файлов JS — это обыденное занятие.
Но в большинстве случаев для этого требуется установка специального приложения для упаковки JS-файлов. Данный же инструмент позволяет перенести сжатие JS-файлов в вэб. Теперь сжатие JS-файлов доступно отовсюду и в любой момент времени.

(Загружая файлы, вы соглашаетесь с нашими Условиями использования Условия использования)

Об опциях слияния JS
Нет параметров для установки, слить по умолчанию

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

Помощь


Реклама

Как объединить файлы онлайн?

Реклама

Получить неограниченный доступ к FilesMerge

1. Неограниченный доступ ко всем 9 инструментам FilesMerge онлайн.
2. Единовременный платеж, единовременная оплата.
3. Меньше или вообще нет рекламы на веб-инструментах.
4. Электронная почта техническая поддержка.
5. Более быстрый и стабильный сервис.

О конфиденциальности ваших файлов

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

Пожертвование в Bitcoin

bitcoin:13MxU8NQ8vMHfZ75qGPtwrQBocZ2VDeVLe

Инструменты для объединения

Помощь


Мы поддерживаем все платформы
Будь вы вы используете Windows, Mac или Linux, если у вас есть одно программное обеспечение для браузера, ваш компьютер может выходить в Интернет, вы можете пользоваться нашими услугами.


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


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

bitcoin:13MxU8NQ8vMHfZ75qGPtwrQBocZ2VDeVLe

Читайте также: