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

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

Опции

k0ttee

Topic Starter сообщение

19.9.2017, 1:52; Ответить: k0ttee

Сообщение #1

Топовый постер

Группа: User
Сообщений: 12040
Регистрация: 2.5.2014
Поблагодарили: 0 раз
Репутация:

0

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

Как объединить файлы 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. Вот пара наиболее распространенных случаев.

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

Двас. В подвале (перед тэгом </body>) мы можем определить это используя хук 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 '<pre>'; print_r($wp_scripts->done); echo '</pre>';
}
// Появляются внизу, после подвала
function show_footer_scripts(){
    global $wp_scripts;
    echo '<pre>'; print_r($wp_scripts->done); echo '</pre>';
}

Теперь открываем страницу, заглядываем в её исходник и видим там списки путей к 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:

http://webdevzoom.com/combine-javascript-files-wordpress-one-file/

--------------------

Задонь кибер-коту на крипто-вискас
btc: 3Hq7X9CosVftRFPqWis1Dkk5MdtM1u6jj9

0

Ответить с цитированием данного сообщения

misterW misterW 19.10.2017, 11:44; Сообщений: 20 Поблагодарили: 0 раз Репутация: 0 Просмотр профиля	19.10.2017, 11:44; Ответить: misterW Сообщение #2
Новичок Группа: User Сообщений: 20 Регистрация: 15.10.2017 Поблагодарили: 0 раз Репутация: 0	а зачем нужна эта операция?

airman

24.10.2017, 11:31; Ответить: airman

Сообщение #3

Топовый постер

Группа: Active User
Сообщений: 9058
Регистрация: 26.1.2010
Из: Россия
Поблагодарили: 251 раз
Репутация:

33

(misterW)

а зачем нужна эта операция?

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

https://developers.google.com/speed/pag ... hts/?hl=ru

--------------------

Статья: мой опыт заработка на рефералах 100к в месяц | Пасьянс Косынка

Cryo Cryo 17.4.2018, 21:44; Сообщений: 1 Поблагодарили: 0 раз Репутация: 0 Просмотр профиля	17.4.2018, 21:44; Ответить: Cryo Сообщение #4
Новичок Группа: User Сообщений: 1 Регистрация: 17.4.2018 Поблагодарили: 0 раз Репутация: 0	k0tee, Благодарю за функцию. * * * misterW, birds, Гугловский тестер скорости - хороший инструмент, наряду с джитиметриксом и прочими, но не есть самоцель понравится гуглу. Т.е. для чего объединять? - Именно для увеличения скорости загрузки: меньше подключенных файлов = меньше запросов к серверу = лучше скорость загрузки = посетителям приятно. * * * К сожалению, наряду с другими методами (функции, плагины, гугл-компилятор, ручное редактирование) и эта функция не справляется с таким плагином, как Contact form 7. Сам по себе плагин работает и без JS, но ajax отлетает, как только джаваскрипт плагина компилируется в один файл с остальными js. В связи с чем страдает юзабилити формы в модальных окнах: данные формы уходят и страница перезагружается без сообщения об отправке, что вводит посетителя в недоумение. Кто знает, как разрешить данную проблему?

k0ttee Topic Starter k0tteeTopic Starter 18.4.2018, 9:42; Сообщений: 12040 Поблагодарили: 0 раз Репутация: 0 Просмотр профиля	Topic Starter 18.4.2018, 9:42; Ответить: k0ttee Сообщение #5
Топовый постер Группа: User Сообщений: 12040 Регистрация: 2.5.2014 Поблагодарили: 0 раз Репутация: 0	Благодарю за функцию. Ух, сентябрь прошлого года... Время когда Кот начал майнить всерьез. :D Кто знает, как разрешить данную проблему? Если разработчикам плагина насрать, и никто не перепиливал плагин, - никак. -------------------- Задонь кибер-коту на крипто-вискас btc: 3Hq7X9CosVftRFPqWis1Dkk5MdtM1u6jj9

Marik_rs

4.10.2018, 10:41; Ответить: Marik_rs

Сообщение #6

Частый гость

Группа: User
Сообщений: 59
Регистрация: 27.7.2018
Из: Москва
Поблагодарили: 0 раз
Репутация:

0

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

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

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой

или обратитесь к любому из модераторов.

« Предыдущая тема · Программная часть · Следующая тема »

1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)

Пользователей: 0

Похожие темы

Тема	Ответов	Автор	Просмотров	Последний ответ
Как вывести деньги в Украине с заблокированного Юмани ?	30	freeax	4832	Сегодня, 16:49 автор: Liudmila
Арбитражники, как ведете учет расходов и доходов?	13	Boymaster	1958	Сегодня, 15:06 автор: Boymaster
Продам базу сайтов Wordpress в 16 миллионов доменов! Свежая сборка.	19	Boymaster	11175	Сегодня, 0:01 автор: Boymaster
Кто где хранит файлы? И какой объем? просто интересно	22	mark2013	2648	15.4.2024, 8:08 автор: Room
Как вы отдыхаете от работы за компом	148	adw-kupon.ru	19717	8.4.2024, 10:37 автор: Skyworker