Ускорение: отключаем JS библиотеку битрикса

Модуль расширенного управления меню для битрикс

Октябрь 4, 2019

Теги: JS библиотека, Ускорение

Повышение производительности битрикс путем отключения ненужных библиотек.

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

Для начала, можно выполнить самые очевидные действия:

В компонентах интернет-магазина подключение встроенных JS библиотек отключается при помощи следующего параметра компонента:


"DISABLE_INIT_JS_IN_COMPONENT" => "Y",

В настройках главного модуля на вкладке "Авторизация" эти галочки должны быть сняты:


Не забываем чистить кеш! Список подключаемых скриптов в компонентах также может кешироваться.

Отключаем счетчик монитора производительности битрикса. После этого, перестанет подключаться файл "bx_stat" и монитор производительности перестанет работать. Хм, потеря не из разряда трагичных, покуда для его функционирования используются методы, сами по себе замедляющие сайт. Для отключения счетчика, используйте данный код в файле /bitrix/.settings.php:


'analytics_counter' => array( 

    
'value' =>
        array (
            
'enabled' => false,
        ),
  ),

Далее ищем, в каких файлах подключается kernel_main.js, для этого в файле "/bitrix/modules/main/tools.php" в функции "CJSCore::Init" вставляем указанный ниже код. Обновляем страницу сайта и пишем в лог какие файлы используют эту функцию. После этого код сразу же удаляем.


@define("LOG_FILENAME",$_SERVER["DOCUMENT_ROOT"]."/jscore.txt");

AddMessage2Log(print_r($arExt,true)."\n\n".print_r(debug_backtrace(DEBUG_BACKTRACE_IGNORE_ARGS),true));

Далее решение по отключению библиотек из серии "бабушка психанула". Не рекомендую, сам использую только если нужно проверить какова будет производительность без библиотек:


AddEventHandler("main""OnEndBufferContent""deleteKernelJs",1);

AddEventHandler("main""OnEndBufferContent""deleteKernelCss",2);

function 
deleteKernelJs(&$content) {
   global 
$USER$APPLICATION;
   if((
is_object($USER) && $USER->IsAuthorized()) || strpos($APPLICATION->GetCurDir(), "/bitrix/")!==false) return;
   if(
$APPLICATION->GetProperty("save_kernel") == "Y") return;

   
$arPatternsToRemove = Array(

   );

   
$content preg_replace($arPatternsToRemove""$content);
   
$content preg_replace("/\n{2,}/""\n\n"$content);
}

function 
deleteKernelCss(&$content) {
   global 
$USER$APPLICATION;
   if((
is_object($USER) && $USER->IsAuthorized()) || strpos($APPLICATION->GetCurDir(), "/bitrix/")!==false) return;
   if(
$APPLICATION->GetProperty("save_kernel") == "Y") return;

   
$arPatternsToRemove = Array(
      
'/<link.+?href=".+?kernel_main\/kernel_main\.css\?\d+"[^>]+>/',
      
'/<link.+?href=".+?bitrix\/js\/main\/core\/css\/core[^"]+"[^>]+>/',
      
'/<link.+?href=".+?bitrix\/panel\/main\/popup\.min\.css\?\d+"[^>]+>/',
      
'/<link.+?href=".+?bitrix\/templates\/[\w\d_-]+\/styles.css[^"]+"[^>]+>/',
      
'/<link.+?href=".+?bitrix\/templates\/[\w\d_-]+\/template_styles.css[^"]+"[^>]+>/',
   );

   
$content preg_replace($arPatternsToRemove""$content);
   
$content preg_replace("/\n{2,}/""\n\n"$content);
}

После отключения библиотек, смотрим в консоль браузера на предмет наличия ошибок. Так проще всего определить, где именно используется встроенная js библиотека по наличию ошибок вида "BX is not defined". Часто бывает, что функционал, использующий BX весьма прост и легко переделывается на jquery. Но это, конечно, не всегда так. В тяжелых случаях, при переписывании кода на jquery, я использую следующую шпаргалку:


BX(id) -> $('#'+id).get(0)


Регулярное выражение для заменыBX\(([^\)]+)\)   $('#'+\1).get(0

BX.hasClass(object,'class') -> $(object).hasClass('class')
BX.addClass(object,'class') -> $(object).addClass('class')
BX.removeClass(object,'class') -> $(object).removeClass('class')

Регулярные выражения для замены:
BX\.hasClass\(([^\,]+)\,\s*([^\)]+)\)   $(\1).hasClass(\2)
BX\.addClass\(([^\,]+)\,\s*([^\)]+)\)   $(\1).addClass(\2)
BX\.removeClass\(([^\,]+)\,\s*([^\)]+)\)   $(\1).removeClass(\2)


BX.ready(function(){ }); -> $().ready(function(){ });

BX.proxy(function(){ },object) -> $.proxy(function(){ },object)

BX.bind(object'click'BX.delegate(myFunctionthis)); -> $(object).on('click',$.proxy(myFunction,this));

Если в функции используертся BX.proxy_context:
$.
proxy(function(target){  },object,target)
и вместо BX.proxy_context используем target

Т
.е
BX.bind(object'click'BX.delegate(myFunctionthis)); -> $(object).on('click',$.proxy(myFunction,this,object));
myFunction(target) {
}
стандартный параметр event для click и прдолжен будет стоять после target  
myFunction
(target,event) {
}

BX.PreventDefault(event); -> event.preventDefault();

Регулярное выражение для замены части до функции:
/* BX\.bind\(([^\,]+),\s*\'([^\']+)\'\,         $(\1).on('\2', */

BX.findChildren(object, {tagName'div'}, false) -> $(object).children('div').toArray()
BX.findChildren(object, {tagName'div'}, true) -> $(object).find('div').toArray()

BX.findParent(object, {tagName'li'}) -> $(object).parents('li:first').get(0)
BX.findParent(object, {tagName'li'}, false) -> $(object).parents('li:first').get(0)

BX.util.in_array('VALUE',array) -> $.inArray('VALUE',array)>=0
!BX.util.in_array('VALUE',array) -> $.inArray('VALUE',array)<0

BX
.type.isArray(var) -> $.isArray(var)

BX.ajax.loadJSON(urlparamssuccessFynction) -> $.post(urlparamssuccessFynction"json");
BX.ajax.post(urlparamssuccessFynction) -> $.post(urlparamssuccessFynction"html");


BX.message('NAME') -> window.mess['name']  (как вариант)

BX.adjust(object, {html"new_html"}); -> $(object).html("new_html");
BX.adjust(object, {style: { display'none' }}); -> $(object).css('display','none');

BX.style(object'display''none'); -> $(object).css('display','none');

Регулярное выражение для замены:
BX\.style\(([^\,]+)\,\s*([^\,]+)\,\s*([^\)]+)\)      $(\1).css(\2,\3)

← Переход к списку