Webamator Blog

Single Load Only. Избавляемся от дублирования js
MENU
Home » Сайтостроителю » Single Load Only. Избавляемся от дублирования js

Single Load Only. Избавляемся от дублирования js

В данной статье я расскажу об одной из проблем Wordpress – повторному подключению javascript. Подключение скрипта несколько раз приводит к его повторному выполнению, т.е. страдает производительность. Кроме того, это может привести к неприятным побочным эффектам – например, если данный скрипт привязывает какое-то действие к нажатию на определенный элемент, при нажатии это действие выполнится несколько раз.

Именно поэтому разработчики WP рекомендуют использовать функцию wp_enqueue_script. Она подключает JS файл если он не был подключен ранее, т.е. можно вызвать ее несколько раз, при этом скрипт будет вставлен только один раз. Но на практике все не так радужно – мне неоднократно встречались сайты, которые загружали один и тот же скрипт многократно. Почему так происходит? Могу предположить несколько причин:

1 – прямое подключение внутри тега head.
Владелец сайта читает инструкцию для скрипта и делает то, что написал автор. Обычно в инструкции говорится “вставьте тег <script> в заголовок страницы (между <head> и </head>)”. С точки зрения автора скрипта все правильно – он пишет инструкцию для всех сайтов, а не специально для WP. Но в результате этот js на WordPress сайтах может быть подключен два или более раз.

2 – использование низкокачественных или старых тем и плагинов.
Мне попадались шаблоны, и плагины, в которых файлы подключаются банально:
echo ‘<script>…</script>’;
Особенно внимательно следует относится к шаблонам, скачанным не с репозитария WP, а с других источников.

3 – использование разных ID в функции wp_enqueue_script.

https://developer.wordpress.org/reference/functions/wp_enqueue_script/

первый параметр функции wp_enqueue_script – $handle, должен быть уникальным. К примеру у вас есть два или больше плагина, которые используют fancybox, и оба плагина используют функцию wp_enqueue_script:
тогда первый будет иметь примерно такой код

wp_enqueue_script( 'plugin_1_script', plugins_url( '/assets/fancybox/js/fancybox.js' , __FILE__ ), array( 'jquery' ), '2.0', true );

а второй примерно такой

wp_enqueue_script( 'plugin_2_script', plugins_url( '/assets/fancybox/js/fancybox.min.js' , __FILE__ ), array( 'jquery' ), '2.0', true );

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

Как избежать подобного дублирования скриптов? Я думаю, мы можем давать владельцу сайта выбор – загружать скрипт или нет.
Пусть сам решает – и если при просмотре html-кода он видит что какой-то файл грузится дважды, у него должна быть возможность отключить дублирование. Как этого добиться? Приведу пример для bootstrap.

Добавим к настройкам плагина опцию my_plugin_bootstrap_load:

function my_plugin_set_options() {
	add_option('my_plugin_bootstrap_load', 1);
}

Добавим в настройках плагина возможность менять данную опцию:

function my_plugin_options_page() {
	$myPluginBootstrapLoad	= get_option('my_plugin_bootstrap_load');

	if ( ! isset( $_REQUEST['myPluginBootstrapLoad'] ) )
		$_REQUEST['myPluginBootstrapLoad'] = false;

	if ( isset ($_REQUEST['settingsUpdated']) && $_REQUEST['settingsUpdated'] == true ){
		update_option('my_plugin_bootstrap_load', $_REQUEST['myPluginBootstrapLoad']);
		?>
		<div class="updated"><p><strong> <?php _e('Your settings are saved', 'my_plugin'); ?></strong></p></div>
		<?php
	}

	<form method="post" action="<? echo $_SERVER['REQUEST_URI'];?>">
		<?php
		if ($_REQUEST['settingsUpdated']){
			$selectBootstrapLoad	= $_REQUEST['myPluginBootstrapLoad'];
		} else {
			$selectBootstrapLoad	= $myPluginBootstrapLoad;
		}
		?>
		<select name="myPluginBootstrapLoad">
			<option value="1" <?php echo ($selectBootstrapLoad == 1) ? 'selected' : false ;?>><?php echo __('Load Bootstrap from the site', 'my_plugin'); ?></option>
			<option value="0" <?php echo ($selectBootstrapLoad == 0) ? 'selected' : false ;?>><?php echo __('Don\'t load Bootstrap', 'my_plugin'); ?></option>
		</select>

		<input type="submit" name="settingsUpdated" class="button button-primary" value="<?php _e('Save Changes', 'my_plugin') ?>" />

	</form>

}

Подключаем Bootstrap, учитывая значение опции:

if (get_option('my_plugin_bootstrap_load') == 1){
	function enqueue_external_files() {
		wp_enqueue_script( 'my-plugin-bootstrap-js', '//netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js', array('jquery'), true); // all the bootstrap javascript goodness
		wp_enqueue_style( 'my-plugin-bootstrap-css', '//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css' );
	}
	add_action('wp_enqueue_scripts', 'enqueue_external_files');
}

Если у вас есть какие-то предложения или замечания, буду рад любым комментариям, а подобный подход при разработке плагинов предлагаю назвать SLON – аббревиатура от Single Load Only.

Popularity: 42%

Добавлено 19 сентября 2017
Рубрика: Сайтостроителю
Метки: , , ,

Если данный пост показался вам полезным или интересным, нажмите на одну из кнопок ниже - от vkontakte, facebook, tweeter или google+, чтобы о нем узнали ваши друзья. Спасибо!

Также рекомендую публикации, похожие на "Single Load Only. Избавляемся от дублирования js"

Что нового в WordPress 4.9

15 ноября 2017 вышел WordPress версии 4.9, названный «Tipton» в честь джазового музыканта и лидера группы Билли Типтона. В этой версии вас ждут значительные улучшения интерфейса Customizer (ага, [...]

Подключение JS только там, где это необходимо

Один из методов ускорения скорости загрузки сайтов на вордпресс – подключение дополнительных файлов только там, где это необходимо. Если судить по тем сайтам, которые меня просили оптимизировать, проблема достаточно [...]

SLON – пример плагина

Повторное подключение JavaScript приводит к его повторному выполнению, то есть к проблеме производительности сайта. Кроме того, это может привести к неприятным побочным эффектам – например, если данный скрипт [...]

Что нового в WordPress 4.8

WordPress Version 4.8, названная «Evans» в честь джазового пианиста и композитора Уильяма Джона «Bill» Evans, доступна для загрузки или обновления на панели инструментов WordPress 8 июня 2017 года. [...]

Нет комментариев

No comments yet.

RSS feed for comments on this post.

Leave a comment