Как объединить html css js в один файл

Обновлено: 05.07.2024

Каждый, кто задавался вопросом оптимизации работа сайта (по-большому счёту, — все) и применял битриксовский механизм объединения css- или js-файлов (далее — ассетсов), при анализе результата не мог быть удовлетворён полностью. Процесс объединения не поддаётся явному контролю, результат объединения может измениться по непонятным для нас причинам. При чём этот подход — сваливание в общую кучу всех ассетсов — явно не то, чего мы хотели бы получить: в любом проекте есть «зафиксированные» ассетсы (по которым работа не ведётся) и не хочется, чтобы на их кеш влияли новые, которые только находятся в работе. Давайте разберёмся в особенностях механизма (речь про чекбоксы «Объединять CSS файлы» и «Объединять JS файлы», в настройках Главного модуля) и посмотрим, на что мы можем повлиять.

Претензии, с которыми мы будем разбираемся:

  • Мне не нравится, что добавление нового компонента в каком-то месте сайта, приводит к перегенерации уже скомпилированного кеш-файла.
  • Мне не нравится, что они смешаны в кучу. Я хочу понять, по какому принципу механизм решает, какие ассетсы в какой кеш-файл определить.
  • Зная, какие ассетсы не будут меняться в обозримом будущем (к примеру, стили каркаса сайта), я хотел бы чтобы они объединялись в отдельный кеш-файл и никто из компонентов их не перегенеривал.

¶1. Стандартные потоки ассетсов.

В контексте обсуждаемого вопроса, в Битриксе есть понятие целевых потоков ( \Bitrix\Main\Page\Asset::$targetList ). Главные, с которыми мы имеем дело: ассетсы ядра, шаблона, страницы.

¶1.1. Ассетсы ядра

Код целевого потока: KERNEL — все, которые лежат в путях /bitrix/js/ , /bitrix/css/ .

Особенность: на них механизм объединения не действует.

Здесь же: аналогично не действует объединение для тех ассетсов, которые расположены в путях:

  • /bitrix/panel/
  • /bitrix/themes/
  • /bitrix/modules/

¶1.2. Ассетсы шаблона

Код целевого потока: TEMPLATE — те ассетсы, которые были добавлены во время выполнения кода, инициированного из файлов шаблона сайта: header.php и footer.php . Ещё раз, это важно: если у нас начал подключаться и выполняться header.php нашего шаблона сайта и внутри него был выполнен компонент и компонент добавил в общий список какой-то ассетс, этот ассетс детектится как относящийся к пространству TEMPLATE.

Признак: кеш-файл, подключенный в итоговый html-кода страницы, имеет в пути вкрапление template_, пример:
/bitrix/cache/css/>/>/template_e4f06/template_e4f06_v1.css

¶1.3. Ассетсы страницы

Код целевого потока: PAGE — те ассетсы, которые были добавлены за границами файлов шаблона сайта. То есть подключили мы шаблон, начали выполнять /index.php — всё, начало действовать пространство страницы. И все компоненты, которые выполняются во время выполнения данного файла при добавлении нового ассетса в общий список маркируются пространством PAGE.

Вот почему например, если у нас какой-то компонент находился в шаблоне сайта (или до него дело доходило во время фактического выполнения header.php — например, через подключаемые области или шаблоны других компонентов), его ассетсы объединялись в кеш-файл template_*, а как только мы перенесли компонент на страницу, ассетсы переехали в page_*-файл.

Признак: кеш-файл, подключенный в итоговый html-кода страницы, имеет в пути вкрапление page_, пример:
/bitrix/cache/css/>/>/page_e4f06/page_e4f06_v1.css

¶2. Пользовательские потоки ассетсов

Мы можем в любой момент времени, находясь в любом из пространств, прервать его (или вклиниться) и начать формировать своё пространство.

  • запоминаем текущий открытый поток (мы же не вредители, мы хотим грамотно вклиниться в процесс);
  • начинаем формировать свой поток.
    Важно! Прервать кастомный поток и дополнить ниже по коду мы не можем (в отличие от стандартных потоков);
  • набрасываем в поток ассетсы;
  • возвращаем поток, который действовал до того, как мы вклинились.

¶3. Накапливание ассетсов в кастомный поток

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

Чтобы избежать дополнительных запросов со стороны браузера, можно включить непосредственно стилей и(ли) скриптов в сам HTML-документ.

Здесь стоит остановиться на следующем моменте: если размер CSS- (или JavaScript-) файла больше, чем 20% (и при этом больше 5 Кб в сжатом виде), лучше вынести его как отдельный компонент. Это позволит настроить его кэширование для постоянных пользователей вашего сайта.

Рассматривать включение всех ресурсов в исходную HTML-страницу стоит только в том случае, если достаточно большой процент посетителей (больше 90%) пришли на нее в первый и (возможно) в последний раз. Тогда эта технология будет замечательно работать: кэширование ничего практически не даст, а дополнительные запросы к серверу замедлят загрузку страницы для новых, незнакомых со спецификой сайта посетителей (что может быть решающим фактором для их окончательного ухода).

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

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

4.1. Объединение HTML- и CSS-файлов

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

4.2. Объединение JavaScript-файлов

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

Объединение JavaScript и CSS в одном файле

Объединение JavaScript и CSS в одном файле Однако существует способ объединения CSS с JavaScript и сведения количества загрузок к одной. Техника основана на том, как CSS и анализатор JavaScript ведут себя в IE и Firefox.Когда анализатор CSS сталкивается с символом комментария HTML (<!--) в содержании

Шаг третий: все-в-одном

Шаг третий: все-в-одном Можно использовать data:URI и внедрить все изображения в соответствующие HTML/CSS-файлы, уменьшив таким образом размер страницы (за счет gzip-сжатия, по большому счету, потому что таблица стилей перед этим не сжималась) еще на 15%, однако время загрузки при

Несколько заданий в одном файле

Несколько заданий в одном файле Каждое отдельное задание в WS-файле должно находиться внутри элементов <job> и </job>. В свою очередь, все элементы <job> являются дочерними элементами контейнера <package>.В качестве примера рассмотрим сценарий multijob.wsf, приведенный в

Совместное использование HTML и JavaScript

Совместное использование HTML и JavaScript Прежде всего надо рассмотреть тег <SCRIPT>. Этот тег служит для вставки скриптов в HTML-код страницы. Его формат:<SCRIPT [language=""] [src=""]>. . . Текст скрипта</SCRIPT>Текст

Передача и обработка данных в html-файле

Передача и обработка данных в html-файле Передача данных в html-файл:Передачу данных в html-файл можно произвести через URL-адрес. После адреса ставиться знак вопроса и после него параметр, который Вы хотите передать. Если этих параметров несколько, то между ними ставиться

2.2 Что хранится в файле?

2.2 Что хранится в файле? Формат файла зависит от программ, которые используют его. Типы файла весьма разнообразны, возможно, потому, что существует большое разнообразие программ. Но, поскольку типы файла не определяются файловой системой, ядро не может указать вам тип

Установки в файле конфигурации

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

Пример 33-5. Комбинирование сценария Bash и Perl в одном файле

5.7.5. Объединение выходных потоков в файле

13-я КОМНАТА: Две в одном

13-я КОМНАТА: Две в одном Люди готовы щедро платить за небольшую экономию и даже за потенциальную возможность таковой. Этот психологический нюанс давно используют маркетологи, и в компьютерной отрасли можно найти немало тому примеров. Например, если помните, главной

Раз уж я затронул тему снижения числа коннектов к серверу при загрузке сайта, то было бы уместо вспомнить незаслуженно забытую технику — объединение JS и CSS в одном файле.

Насколько я знаю, первым эту технику исследовал некий ShivaP в статье «Combine CSS with JS and make it into a single download!» ещё четыре года назад.

Идея такова: в файле специальными ухищрениями помещается и код JavaScript, и код CSS, файл подключается два раза — один раз через тег SCRIPT, второй раз через тег LINK (как CSS), браузер грузит файл один раз, а второй раз берёт его уже из кеша.

Автор проверил свою идею на двух браузерах — IE и FireFox, на том и остановился.

Я проверил эту идею на гораздо бо́льшем числе браузеров (обнаружил проблемы на некоторых «Хромах» и исправил), а так же немного её видоизменил, разрешив использовать многострочный CSS без особых неудобств. Последнее нужно персонально мне, так как у меня нет возможности прогонять свой CSS через оптимизаторы и вытягивать таким образом код CSS в одну строку, а я хочу использовать эту технику у себя на сайте.

У техники есть ограничение, которое не портит много крови, но о нём необходимо знать — в тексте CSS и JS не должна встречаться конструкция «*/». Если в CSS достаточно просто выкусить все комментарии («*/» там, можно считать, нигде больше встретиться не может), то в JS за этим придётся следить, так как такая комбинация вполне может встретиться, в частности, в регулярных выражениях. Например: var regexp = /smth*/g;

В таких случаях звёздочку необходимо прятать (например, заменять её в регулярных выражениях на \x2A или разбивать строку: «smth*» + «/»).

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

Мой код выглядит следующим образом (я поставил рядом две картинки, чтобы можно было сравнить как один и тот же код воспринимается интерпретатором JavaScript и парсером CSS):

JS и CSS (15.58КиБ)

Как видите, принцип довольно несложен.

Теперь несколько слов о том как это всё подключается:

Немаловажно так же, что заголовок «content-type» должен быть выставлен в «*/*», чтобы избежать проблем с FireFox 2.

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

Формат вызова простой: скрипту через запятую перечисляются файлы, которые нужно объединить и подключить (файлы берутся из папки «media», см. переменную «$dir»):

Я построил приложение AngularJS, которое имеет структуру примерно такую:

Очевидно, что в нем есть больше каталогов и js-файлов, но идея заключается в том, что у меня есть каждый компонент приложения в другом каталоге, включая его страницу HTML (которая загружается в index.html с помощью ui-router ) и файл JS, содержащий его модуль Angular, контроллеры и т. д.

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

  • theproject.html
  • theproject.js
  • theproject.css

Я провел некоторые исследования и поискал в Google такое решение, предпочтительно используя Grunt. Однако я не нашел никаких инструкций о том, как это сделать.

Может ли кто-нибудь указать мне направление или дать инструкции о том, как этого достичь?

2 ответа

Просто несколько примеров, но это может сэкономить вам некоторое время от копирования макаронных изделий

Я не знаю, есть ли программное решение, но оно возможно и без него.

  • Самое простое-это файлы .css, просто скопируйте их вместе. Вы не можете этого сделать, если вам нужно включить специальный .css для IE, но большинство из них должны соответствовать одному (или двум) запросам. Скопируйте их вместе в том же порядке, в котором вы их загрузили, чтобы не нарушать перезаписанное содержимое. Если вы хотите еще больше сократить задержку в сети, встроите ее.
  • JS немного сложнее. Один файл может быть плохим, так как вы не должны изменять сценарий angular по умолчанию, но размещение всего вашего кода в одном файле должно работать. Обязательно объедините все onLoad-функции. Вы можете попробовать вставить его под кодом angular, но лучше протестировать его заранее. Опять же, вы можете встроить свой код.
  • Вероятно, самыми интенсивными сетевыми, но и самыми сложными файлами являются файлы html.
    • Если вам нужно выполнить некоторую предварительную обработку на стороне сервера, вам не повезло. Попробуйте экспортировать его в API.
    • Если это статический html, у вас есть 2 варианта. Первый-извлечь все HTML в одном (встроенном) файле json, а затем загрузить его 'from ram'. Лучшим способом было бы встроить весь код в ваш theproject.html и скрыть его до тех пор, пока вы не 'load' эту страницу. Это, вероятно, был бы самый эффективный способ.

    Некоторые другие советы, если вам нужна необработанная скорость загрузки:

    • уменьшите и сожмите ваши файлы html, js и css.
    • активировать gzip
    • загрузите данные, которые вам не нужно отображать на странице индекса, со вторым запросом, чтобы браузеру не пришлось ждать, пока все это будет извлечено. Это значительно увеличит время рендеринга первой страницы, если ваше приложение большое. Встроите свой контроллер и ту часть css, которая требуется для вашей индексной страницы, затем извлеките rest. Ваша страница может быть отображена после двух сетевых запросов.

    Похожие вопросы:

    Я показываю webview с удаленным содержимым html get в виде строки с удаленного сервера. Я храню html локально для использования моего приложения без подключения. Кроме того, я также храню сценарий.

    Я работаю над одностраничным сайтом, который включает в себя около дюжины файлов .js и, возможно, полдюжины файлов .css. Большинство файлов .js - это плагины jQuery. Помимо базового файла css, файлы.

    Что делать, если я объединю все CSS всего сайта в один файл? будет ли он кэшироваться браузером или перезагружаться каждый раз, когда открывается новая страница. один файл css содержит разные.

    Я знаю, что это глупый вопрос. Но просто из любопытства, есть ли способ опубликовать файл html (файл .html) как файл js/css (переименованный как .js или .css) с заголовком типа как HTML или js/css и.

    Я использую ember-cli v1.13.8. Ember строит приложение в файлы application-name.js и vendor.js и аналогичные файлы с именем css. Есть ли способ собрать их в отдельные файлы js и css, чтобы в моем.

    Я построил свое приложение с webpack , объединив все css в один файл, все js в один файл и имея один html для моего приложения SPA. Когда я провожу тестирование с помощью webpagetest, большинство.

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