Объединить небольшие js-файлы в один крупный

Question

Я хочу убрать js-код, используемый на моем php-сайте, для увеличения скорости загрузки. На данный момент я включаю в каждый сайт требуемый js-файл. Мой план состоит в том, чтобы объединить все js-файлы в один большой. Не каждая страница использует каждый js-код, поэтому я начал что-то, но не знаю, имеет ли это смысл.

Я уже прочитал статью One JS File for Multiple Pages, но метод Пола Ирландии - это способ усложнить для меня (на данный момент) как новичок.

Это мой подход: я создаю файл core.js и вызвать его на каждом сайте, как ..

<script src="js/core.js"></script> 

В core.js я сначала получить имя соответствующей страницы.

var path = window.location.pathname; 
var page = path.split("/").pop(); 
var page_name = page.slice(0, -4); 

Затем я проверяю, какой сайт требует, какой js-скрипт (псевдокод).

if (page_name == 'xyz'){ 
execute this code which is only used on this site 
} 

if (page_name == 'abc' || 'xyz' || 'def'){ 
execute another code which is used on multiple sites 
} 

if (page_name == 'ghi' || 'jkl' || 'mno' || 'xyz'){ 
include jquery for multiple sites 
} 
... 
... 

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

К слову: код js, который я размещаю на своем веб-сайте, не меняется часто.

Спасибо

Миш

Answer 1

решение вашей проблемы может быть что-то вроде:

if(selector) { 
//run code 
} 

Это запускает код внутри блока, только если конкретный селектор существует. Таким образом, вам не придется сталкиваться с проблемой получения имени страницы, расщепления и нарезки строки и т. Д. (Это также связано с ошибками).

Итак, давайте скажем, вы хотите, чтобы добавить некоторые innerHTML на некотором узле он будет выглядеть примерно так:

function bar (text) { 
    alert(text) 
} 

if(document.getElementById('#foo')) { 
    bar('#foo exists!') 
} 

Таким образом bar только вызывается, когда узел с идентификатором #foo существует.

Answer 2

Сплита вашего javascript в разумные группы. У вас может быть раздел администратора на вашем сайте, поэтому у вас есть admin.js.

Следует также отметить, что большинство браузеров загружает только файл javascript, а затем кэширует его. Вы сказали, что ваш код не меняется очень часто, так что вы можете обнаружить, что его все в одном файле фактически не так сильно влияет.

Answer 3

Если честно, это только замедлит ваше выступление. Если ваши пользователи долгое время остаются на веб-сайте, тогда один файл уменьшает количество помех в вашем коде. Но, если пользователь посещает только несколько страниц, один файл является дополнительной нагрузкой на пропускную способность. Существует вероятность, что большинство ваших пользователей могут даже не нуждаться в более чем половине ваших js.

Плюс, эти дополнительные условия никому не помогают. Итак, я бы сказал, не используйте опцию одиночного файла.

Answer 4

Допустим, у вас есть страницы, как page1, page2, page3 и т.д.

Тогда ваш core.js будет включать в себя все коды всех страниц, а затем просто инициализировать код, который вы хотите использовать

var page1= (function() { 
       var Init = function(){ 
       //write the codes used by page 1 
       }; 
       return { 
       Initialize: function() { 
        Init(); 
       } 
       }; 
      })(); 

var page2= (function() { 
       var Init = function(){ 
       //write the codes used by page 2 
       }; 
       return { 
       Initialize: function() { 
        Init(); 
       } 
       }; 
      })(); 
var page3= (function() {......}); 

var page = path.split("/").pop(); 
var path = window.location.pathname; 

var page = path.split("/").pop(); 
var page_name = page.slice(0, -4); 

if (page_name == 'pg1'){ 
    page1.Initialize(); 
} 

if (page_name == 'pg2' || 'pg3'){ 
    page2.Initialize(); 
    page3.Initialize(); 
} 

if (page_name == 'pg4'){ 
    page4.Initialize(); 
}