Слишком большой размер JS кода
 

Приветствую!

Google Tag Manager (GTM) при сохранении кода в custom HTML tag ругается, что он больше 102400 символов.

Сам я только начинаю осваивать JS. Подскажите, пожалуйста, как эффективнее уменьшить размер кода так, чтобы это не повлияло на скорость отработки этого custom HTML tag.

Изначально код имеет подобный вид (только в моем случае размер кода значительно больше):

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<script>
// Define JavaScript for each page variation of this experiment.
var pageVariations = [
  function() {},  // Original: Do nothing. This will render the default HTML.
  function() {    // Variation 1: Banner Image
    document.getElementById('banner').src = 'bay-bridge.jpg';
  },
  function() {    // Variation 2: Sub-heading Text
    document.getElementById('heading').innerHTML = 'Look, a Bridge!';
  },
  function() {    // Variation 3: Button Text
    document.getElementById('button').innerHTML = 'Learn more';
  },
  function() {    // Variation 4: Button Color
    document.getElementById('button').className = 'button button-blue';
  }
];

// Wait for the DOM to load, then execute the view for the chosen variation.
$(document).ready(function(){
  // Execute the chosen view
  pageVariations[chosenVariation]
});
</script>

Как вариант я думаю сохранить каждый Variation в отдельный js файл на сервера сайта и в custom HTML tag прописывать не весь код, изменяющий страницу, а только код запрашивающий внешний код, который сохранен на сервере сайта.
Это верное решение?

Вот так:

function() {    // Variation 1: Banner Image
       var script = document.createElement('script');
       script.src = 'mysite.com/js/variation1.js';
       var head = document.getElementsByTagName("head")[0];
       head.appendChild(script);
          },

Да, уточню. Размер кода большой за счет большого кол-ва изменений на странице, то есть в 1 вариации кода может быть очень много. Примерно так:

document.getElementById('heading').innerHTML = 'Look, a Bridge!';
 document.getElementById('timeline').outerHTML= ''; 
 document.getElementById('table_div').outerHTML= ''; 
 //Удаляем текст под заголовком
 document.getElementsByClassName("col-lg-12 text-center")[2].getElementsByTagName("p")[1].outerHTML = ''; 
 document.getElementsByClassName("col-lg-12 text-center")[2].getElementsByTagName("p")[1].outerHTML = ''; 
 //Restore pie-charts style
 document.querySelectorAll('canvas')[0].style.display = 'block'; 
 document.querySelectorAll('canvas')[1].style.display = 'block'; 
 document.querySelectorAll('canvas')[2].style.display = 'block'; 
 document.getElementsByClassName('chart-content')[0].style.marginTop= "0"; 
 document.getElementsByClassName('chart-content')[1].style.marginTop= "0"; 
 document.getElementsByClassName('chart-content')[2].style.marginTop= "0"; 
 document.getElementsByClassName('chart')[0].style.width = "230px"; 
 document.getElementsByClassName('chart')[1].style.width = "230px"; 
 document.getElementsByClassName('chart')[2].style.width = "230px"; 
    document.getElementById('heading').innerHTML = 'Look, a Bridge!';
    blablabla....................

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

https://developer.mozilla.org/ru/doc...терации

циклы вам в помощь!


https://developer.mozilla.org/ru/doc.../Array/forEach
метод forEach вам в помощь

+потереть комментарии

вот пример для ясности

document.querySelectorAll('canvas')[0].style.display = 'block'; 
 document.querySelectorAll('canvas')[1].style.display = 'block'; 
 document.querySelectorAll('canvas')[2].style.display = 'block';

аналог (если элемента три.)

document.querySelectorAll('canvas').forEach(el=>el.style.display = 'block');

селекторы которые нужны будут не один раз сохранять в переменные

пример

var canv = document.querySelectorAll('canvas');
 canv[0].style.display = 'block';
//некий код
canv[0].style.чтототамЕще = 'как-то';

j0hnik,
Спасибо большое! :) Учиться и учиться.