Как объединить файлы Javascript в WordPress в один файл. Объединение объектов Объединение js в один файл

Сие действо уменьшает количество запросов к серверу, ускоряя таким образом сайт. Особо актуально для HTTP1.1 и страниц, для получения которых идет более 20 запросов. Кроме того, это добавляет поинтов в тесте (что для многих вообще самое главное).

Как объединить файлы Javascript в WordPress в один файл - способ без плагинов

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

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

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

2.) Отсутствие гибкости. Если есть сложение или вычитание файла javascript, мы должны повторно объединить этот файл вручную.

3.) Нельзя гарантировать, что объединенные куски кода не будут конфликтовать. Это связано с последовательностью вызовов функций и областями видимости переменных javascript.

Как объединить файлы Javascript в WordPress в один файл - автоматически

Чтобы автоматически объединить файлы javascript в WordPresss, сначала нужно собрать пути к файлам javascript вместе с именами их дескрипторов (аналог ручного способа, только автоматически).

Мы можем найти всю информацию о файлах javascript, загруженных на страницу WordPress в объекте WP_Scripts .

Этот объект хранится в переменной $wp_scripts и вызываются в секциях шаблона, таких как wp_head, wp_print_scripts (wp_enqueue_scripts), wp_footer, init . Вот пара наиболее распространенных случаев.

Раз. В хэде (тэг ) мы можем определить это используя хук wp_head.

Двас. В подвале (перед тэгом ) мы можем определить это используя хук wp_footer.

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

Код: add_action("wp_head", "show_head_scripts", 9999);
add_action("wp_footer", "show_footer_scripts", 9999);

// Появиться сверху, перед открытием body
function show_head_scripts(){
global $wp_scripts;
echo ""; print_r($wp_scripts->done); echo "";
}
// Появляются внизу, после подвала
function show_footer_scripts(){
global $wp_scripts;
echo ""; print_r($wp_scripts->done); echo "";
}

Теперь открываем страницу, заглядываем в её исходник и видим там списки путей к JS-файлам (в верхней и нижней частях страницы).

Объединение файлов javascript в один файл в WordPress

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

Как это делается (описание логики кода):

1.) Копируется дескриптор файла javascript в соответствии с его зависимостью, чтобы после слияния он смог работать без ошибок. Мы можем сделать это, вызвав метод all_deps в объекте WP_Scripts ($ wp_scripts-> all_deps ($ wp_scripts-> queue));

2.) Получения кода в файлах javascript (используя file_get_contents) и комбинация с остальными. Включая скрипт localize wp_localize_script (если есть). Этот скрипт можно найти в $ wp_scripts-> registered ["handle"] -> extra ["data"]

3.) Запись комбинированного кода в файл (используя file_put_contents) и загрузка его с помощью функции wp_enqueue_scripts.

4.) Отмена регистрацию всех скриптов / дескрипторов, которые были объединены, это делается после завершения процесса описанного в прошлом пункте (если мы отменим регистрацию сценария, тогда его зависимый скрипт также будет снят с регистрации).

Чтобы движок проделал все эти задачи, вставьте следующий код в файл functions.php:

Код: add_action("wp_enqueue_scripts", "merge_all_scripts", 9999);
function merge_all_scripts()
{
global $wp_scripts;

/*
#1. Reorder the handles based on its dependency,
The result will be saved in the to_do property ($wp_scripts->to_do)
*/
$wp_scripts->all_deps($wp_scripts->queue);

// New file location: E:xampp\htdocs\wordpresswp-content\theme\wdc\merged-script.js
$merged_file_location = get_stylesheet_directory() . DIRECTORY_SEPARATOR . "merged-script.js";

$merged_script = "";

// Loop javascript files and save to $merged_script variable
foreach($wp_scripts->to_do as $handle)
{
/*
Clean up url, for example wp-content/themes/wdc/main.js?v=1.2.4
become wp-content/themes/wdc/main.js
*/
$src = strtok($wp_scripts->registered[$handle]->src, "?");

/**
#2. Combine javascript file.
*/
// If src is url http / https
if (strpos($src, "http") !== false)
{
// Get our site url, for example: http://webdevzoom.com/wordpress
$site_url = site_url();

/*
If we are on local server, then change url to relative path,
e.g. http://webdevzoom.com/wordpress/wp-content/plugins/wpnewsman/css/menuicon.css
become: /wp-content/plugins/wpnewsman/css/menuicon.css,
this is for reduse the HTTP Request

If not, e.g. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css,
then leave as is (we"ll skip it)
*/
if (strpos($src, $site_url) !== false)
$js_file_path = str_replace($site_url, "", $src);
else
$js_file_path = $src;

/*
To be able to use file_get_contents function we need to remove slash,
e.g. /wp-content/plugins/wpnewsman/css/menuicon.css
become wp-content/plugins/wpnewsman/css/menuicon.css
*/
$js_file_path = ltrim($js_file_path, "/");
}
else
{
$js_file_path = ltrim($src, "/");
}

// Check wether file exists then merge
if (file_exists($js_file_path))
{
// #3. Check for wp_localize_script
$localize = "";
if (@key_exists("data", $wp_scripts->registered[$handle]->extra)) {
$localize = $obj->extra["data"] . ";";
}
$merged_script .= $localize . file_get_contents($js_file_path) . ";";
}
}

// write the merged script into current theme directory
file_put_contents ($merged_file_location , $merged_script);

// #4. Load the URL of merged file
wp_enqueue_script("merged-script", get_stylesheet_directory_uri() . "/merged-script.js");

// 5. Deregister handles
foreach($wp_scripts->to_do as $handle)
{
wp_deregister_script($handle);
}
}

Проверяем, что слияние прошло успешно

Идем на страницу блога, открываем исходник и ищем в нем подключенный файл merged-script.js

Затем убедитесь, что в объединенном скрипте нет ошибок, для этого откройте «инструменты разработчика» браузера (нажмите F12 в Google Chrome) и выберите вкладку Console.

Консоль показывает текст ошибки и ссылается на место возникновения. Если нет ругательств на файл merged-script.js значит все ок.

Проверьте на работоспособность остальные скрипты, которые не участвовали в объединении.

Original article in english you cat read there.

Объединяет содержимое двух или более заданных javascript-объектов. Результат объединения записывается в первый из этих объектов (он же будет возвращен функцией, после ее выполнения). Функция имеет два варианта использования:

объединяет содержимое объектов target , object1 ,.., objectN , помещая результат в объект target .

Особенности использования

Если задать два или более объекта, то результатом будет их объединение. В случае, если вы зададите только один объект, функция extend() добавит его содержимое в глобальный объект $ (jQuery). Таким образом можно расширять возможности библиотеки, добавляя свои функции в ее пространство имен. Это может быть полезно при написании плагинов.

Напомним, что в результате объединения объектов, первый из них будет изменен (он же будет возвращен в качестве результата выполнения функции extend()). Если нужно, чтобы ни один из заданных объектов не был изменен, то можно задать в качестве параметра target пустой объект:

var object = $.extend ({ } , object1, object2) ;

Рекурсивное (глубокое) копирование

При объединении объектов, совпадающие поля переписываются:

По умолчанию, extend() выполняет поверхностное объединение объектов, это означает, что если они содержат другие объекты внутри, то extend() будет перезаписывать их как и в предыдущем случае:

однако, если в качестве первого параметра указать true , то будет выполнено глубокое копирование, при котором к внутренним объектам будет применяться процедура объединения (а не переписывания как в прошлом случае):

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

Для выпуска продукта, я хотел бы объединить 3 CSS файлов в один и преуменьшать его использованием, например, YUI Compressor . Но тогда мне нужно будет обновить все страницы, которые нуждаются в этих 3 файлах, чтобы ссылаться на недавно измененный CSS. Это кажется подверженным ошибкам (например, вы удаляете и добавляете некоторые строки во многие файлы). Любой другой менее рискованный подход? Такая же проблема для JS-файлов.

13 ответов

Сортировка:

Активность

Вы можете запустить его в муравьиной задаче и, следовательно, включить его в свои сообщения/pre commit hooks, если вы используете svn/git.

UPDATE: В настоящее время я использую хрюкать с CONCAT, преуменьшать & уродовать взносы. Вы можете использовать его с наблюдателем, чтобы он создавал новые мини-файлы в фоновом режиме при каждом изменении источника. uglify contrib не только разбивает журналы консоли, но также удаляет неиспользуемые функции и свойства.

Мне нужно будет обновить все страницы, которые нуждаются в этих 3 файлах, чтобы ссылаться на недавно укоренившийся CSS.

Во-первых, я бы сказал, что у вас должен быть общий заголовок. Поэтому, когда это необходимо, не нужно менять все заголовки. Хорошая практика - иметь один заголовок или 2-3. Так как ваша страница нужна, вы можете изменить свой заголовок. Поэтому, когда вы хотите расширить свое веб-приложение, это будет менее рискованно и утомительно.

Вы не упомянули о своей среде разработки. Вы можете видеть, что есть many compressing tools listed for different environments . И вы используете хороший инструмент i.e.YUI Compressor.

Я не вижу, чтобы вы упоминали систему управления контентом (Wordpress, Joomla, Drupal и т. Д.), Но если вы используете какую-либо популярную CMS, у них есть все доступные плагины/модули (бесплатные опции), которые будут минимизировать и кэшировать ваш css и js.

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

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

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

Итак, сначала выясните, как объединить и минимизировать ваши файлы из командной строки (в документации YUICompressor). Назначьте каталог для автоматически генерируемых материалов, отдельно от материала, который вы работаете, но доступного для веб-сервера, и выводите туда, например gen/scripts/combination.js. Поместите команды, которые вы использовали в Makefile, и повторите «make» каждый раз, когда вы внесли изменения и хотите, чтобы он вступил в силу. Затем обновите заголовки в других файлах, чтобы указать на комбинированные и мини-файлы.

Для людей, которые хотят что-то немного более легкие и гибкие, я сегодня создал js.sh , чтобы решить эту проблему. Это простой инструмент командной строки, ориентированный на файлы JS, которые могут быть легко изменены, чтобы заботиться о файлах CSS. Преимущества:

легко настраивается для использования несколькими разработчиками по проекту
Объединяет JS файлы в порядке, указанном в script_order.txt
компрессов их с Closure Compiler от Google
Разделяет JS в < 25kb куски где возможно, так как iPhone не будет кэшировать что-либо большее, чем 25kb.
Создает небольшой файл PHP с тегами, которые вы можете включить в соответствующих случаях
Использование: js.sh -u yourname

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

Первым шагом оптимизации является минимизация файлов. (Я настоятельно рекомендую GULP для минимизации и оптимизации. Его простое решение для часов, установка и все файлы сжимаются сразу. Поддерживает все CSS, JS, less, sass и т. Д.)

ИЛИ Старая школа решение:

1) В общем, как процесс оптимизации, оптимизации производительности сайта, попробуйте слияния всех CSS в один файл и сжать файл с помощью Compass . Таким образом, ваши множественные запросы на статический CSS будут заменены на один.

2) Проблема множественного JS, которую вы можете разрешить, используя CDN (или размещенные в Google Библиотеки), поэтому запросы переходят на другой сервер, а не ваш. Таким образом, сервер не дожидается завершения предыдущего запроса перед отправкой следующего.

3) Если у вас есть собственный локально сохраненный JavaScript, скройте каждый файл, используя плагин Brackets «Сжатие JavaScript». Это в основном один клик для сжатия JavsScript. Brackets - бесплатный редактор для CSS и JS, но может использоваться для PHP и других языков. Существует множество плагинов для выбора как для интерфейсных, так и для сторонних разработчиков. В общем, «одним нажатием», чтобы выполнить все эти (пока множественные) команды. Btw, скобки заменили мой очень дорогой Dreamweaver;)

3) Попробуйте использовать такие инструменты, как Sass , Compass, less , чтобы свести к минимуму CSS.

Примечание: Даже без использования смешивания или переменных ваш CSS будет сжат (простое использование чистого CSS и Compass команда «смотреть» сжимает его для вас).

Надеюсь, это поможет!

В моем симфони проекте я сделать что-то вроде этого

{# layout.html.twig #} {% block styles %} {% if app.environment == "prod" %} {% else %} {% endif %} {% endblock %} {# some-view.html.twig #} {% extends "AppMainBundle::layout.html.twig" %} {% block styles %} {{ parent() }} {% if app.environment != "prod" %} {% else %} {% endblock %}

Когда версия DEV готов к производству, я использую

На чтение 2 мин. Опубликовано 20.04.2017

Привет! Мы продолжаем разбирать самые интересные и самые полезные плагины для сайта WordPress! Сегодня вы узнаете как объединить CSS и JS файлы для оптимизации своего сайта. По умолчанию все CSS и JS файлы отображаются по отдельности, создавая нагрузку на сайт. Вы сможете объединить данные файлы в один файл, чтобы сайт загружался быстрее. Очень простой и полезный плагин!

Установить плагин вы сможете прямо из админ-панели WordPress. Перейдите на страницу: Плагины – Добавить новый , введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.

– Use Compass, поставьте здесь галочку, чтобы включить плагин.

– Compass compiler’s path, здесь указан путь составителя файлов.

– Sass compiler’s path (required only for .sass format – not .scss), путь (адрес) для CSS файлов.

– CoffeeScript compiler’s path, путь для скриптов.

– Compress styles, оптимизировать стили.

– Compress scripts, оптимизировать скрипты.

– Async attribute on footer’s script tag, загружать скрипты асинхронно.

– Resources to exclude, здесь можно исключить определённые скрипты или стили.

– Activate Log, включить журнал лог файлов.

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

– Save, сохраните изменения.

– Empty AssetsMinify’s Cache, нажмите на данную вкладку, чтобы вручную удалить кэш.

Всё готово! После сохранения настроек, все скрипты и стили на вашем сайте будут объединены в один файл. Имеется в виду скрипты и стили, которые отображаются в исходном коде вашего сайта. Таким образом, ваш сайт будет быстрее загружаться!

The Object.assign() method copies all enumerable own properties from one or more source objects to a target object . It returns the target object.

The source for this interactive example is stored in a GitHub repository. If you"d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

Syntax Object.assign(target , ... sources) Parameters target The target object - what to apply the sources’ properties to, which is returned after it is modified. sources The source object(s) - objects containing the properties you want to apply. Return value

The target object.

Description

Properties in the target object are overwritten by properties in the sources if they have the same key . Later sources" properties overwrite earlier ones.

The Object.assign() method only copies enumerable and own properties from a source object to a target object. It uses [] on the source and [] on the target, so it will invoke getters and setters . Therefore it assigns properties, versus copying or defining new properties. This may make it unsuitable for merging new properties into a prototype if the merge sources contain getters.

For copying property definitions (including their enumerability) into prototypes, use Object.getOwnPropertyDescriptor() and Object.defineProperty() instead.

Both String and Symbol properties are copied.

In case of an error, for example if a property is non-writable, a TypeError is raised, and the target object is changed if any properties are added before the error is raised.

Examples Cloning an object const obj = { a: 1 }; const copy = Object.assign({}, obj); console.log(copy); // { a: 1 } Warning for Deep Clone

For deep cloning, we need to use alternatives, because Object.assign() copies property values.

If the source value is a reference to an object, it only copies the reference value.

Function test() { "use strict"; let obj1 = { a: 0 , b: { c: 0}}; let obj2 = Object.assign({}, obj1); console.log(JSON.stringify(obj2)); // { "a": 0, "b": { "c": 0}} obj1.a = 1; console.log(JSON.stringify(obj1)); // { "a": 1, "b": { "c": 0}} console.log(JSON.stringify(obj2)); // { "a": 0, "b": { "c": 0}} obj2.a = 2; console.log(JSON.stringify(obj1)); // { "a": 1, "b": { "c": 0}} console.log(JSON.stringify(obj2)); // { "a": 2, "b": { "c": 0}} obj2.b.c = 3; console.log(JSON.stringify(obj1)); // { "a": 1, "b": { "c": 3}} console.log(JSON.stringify(obj2)); // { "a": 2, "b": { "c": 3}} // Deep Clone obj1 = { a: 0 , b: { c: 0}}; let obj3 = JSON.parse(JSON.stringify(obj1)); obj1.a = 4; obj1.b.c = 4; console.log(JSON.stringify(obj3)); // { "a": 0, "b": { "c": 0}} } test();

Merging objects const o1 = { a: 1 }; const o2 = { b: 2 }; const o3 = { c: 3 }; const obj = Object.assign(o1, o2, o3); console.log(obj); // { a: 1, b: 2, c: 3 } console.log(o1); // { a: 1, b: 2, c: 3 }, target object itself is changed. Merging objects with same properties const o1 = { a: 1, b: 1, c: 1 }; const o2 = { b: 2, c: 2 }; const o3 = { c: 3 }; const obj = Object.assign({}, o1, o2, o3); console.log(obj); // { a: 1, b: 2, c: 3 }

The properties are overwritten by other objects that have the same properties later in the parameters order.

Copying symbol-typed properties const o1 = { a: 1 }; const o2 = { : 2 }; const obj = Object.assign({}, o1, o2); console.log(obj); // { a: 1, : 2 } (cf. bug 1207182 on Firefox) Object.getOwnPropertySymbols(obj); // Properties on the prototype chain and non-enumerable properties cannot be copied const obj = Object.create({ foo: 1 }, { // foo is on obj"s prototype chain. bar: { value: 2 // bar is a non-enumerable property. }, baz: { value: 3, enumerable: true // baz is an own enumerable property. } }); const copy = Object.assign({}, obj); console.log(copy); // { baz: 3 } Primitives will be wrapped to objects const v1 = "abc"; const v2 = true; const v3 = 10; const v4 = Symbol("foo"); const obj = Object.assign({}, v1, null, v2, undefined, v3, v4); // Primitives will be wrapped, null and undefined will be ignored. // Note, only string wrappers can have own enumerable properties. console.log(obj); // { "0": "a", "1": "b", "2": "c" } Exceptions will interrupt the ongoing copying task const target = Object.defineProperty({}, "foo", { value: 1, writable: false }); // target.foo is a read-only property Object.assign(target, { bar: 2 }, { foo2: 3, foo: 3, foo3: 3 }, { baz: 4 }); // TypeError: "foo" is read-only // The Exception is thrown when assigning target.foo console.log(target.bar); // 2, the first source was copied successfully. console.log(target.foo2); // 3, the first property of the second source was copied successfully. console.log(target.foo); // 1, exception is thrown here. console.log(target.foo3); // undefined, assign method has finished, foo3 will not be copied. console.log(target.baz); // undefined, the third source will not be copied either. Copying accessors const obj = { foo: 1, get bar() { return 2; } }; let copy = Object.assign({}, obj); console.log(copy); // { foo: 1, bar: 2 } // The value of copy.bar is obj.bar"s getter"s return value. // This is an assign function that copies full descriptors function completeAssign(target, ...sources) { sources.forEach(source => { let descriptors = Object.keys(source).reduce((descriptors, key) => { descriptors = Object.getOwnPropertyDescriptor(source, key); return descriptors; }, {}); // By default, Object.assign copies enumerable Symbols, too Object.getOwnPropertySymbols(source).forEach(sym => { let descriptor = Object.getOwnPropertyDescriptor(source, sym); if (descriptor.enumerable) { descriptors = descriptor; } }); Object.defineProperties(target, descriptors); }); return target; } copy = completeAssign({}, obj); console.log(copy); // { foo:1, get bar() { return 2 } } Polyfill

This polyfill doesn"t support symbol properties, since ES5 doesn"t have symbols anyway:

If (typeof Object.assign !== "function") { // Must be writable: true, enumerable: false, configurable: true Object.defineProperty(Object, "assign", { value: function assign(target, varArgs) { // .length of function is 2 "use strict"; if (target === null || target === undefined) { throw new TypeError("Cannot convert undefined or null to object"); } var to = Object(target); for (var index = 1; index < arguments.length; index++) { var nextSource = arguments; if (nextSource !== null && nextSource !== undefined) { for (var nextKey in nextSource) { // Avoid bugs when hasOwnProperty is shadowed if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) { to = nextSource; } } } } return to; }, writable: true, configurable: true }); }

Specifications Specification

ECMAScript Latest Draft (ECMA-262)
The definition of "Object.assign" in that specification.

Browser compatibility

The compatibility table on this page is generated from structured data. If you"d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

Desktop Mobile Server Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet Node.js assign

Chrome Full support 45

Edge Full support 12

Firefox Full support 34

IE No support No

Opera Full support 32

Safari Full support 9

WebView Android Full support 45

Chrome Android Full support 45

Firefox Android Full support 34

Opera Android Full support 32

Safari iOS Full support 9

Samsung Internet Android Full support 5.0