Wohin mit seitenspezifischem JavaScript-Code?

Question

Angenommen, ich habe zwei Seiten: Page1.html und Page2.html. Beide Seiten müssen:

$(document).ready(function() { 
    Init(); 
}); 

Nur Page1.html benötigt:

$(document).ready(function() { 
    InitPage1(); 
}); 

Nur Page2.html benötigt:

$(document).ready(function() { 
    InitPage2(); 
}); 

Was ist die beste Praxis, die JavaScript-Dateien für die Strukturierung, wenn man bedenkt Overhead für zusätzliche Anfragen vs. Overhead für die Ausführung von irrelevantem Code?

Option 1:

Ich kann 3 JavaScript-Dateien machen, eine, die auf beiden Seiten verwiesen hat, eine, die nur auf Page1.html verwiesen ist, und eine, die nur auf Page2.html verwiesen wird.

Der Vorteil ist, dass jede Seite irrelevanten Code in $(document).ready() nicht ausgeführt wird.

Der Nachteil ist, dass Page1.html und Page2.html müssen 2 Anfragen für JavaScript-Dateien, eine für die gemeinsame Datei und eine andere für die seitenspezifische Datei, und die zusätzliche Anfrage wird zusätzliche Aufwand.

Option 2:

Ich kann 1 machen JavaScript-Datei, die auf beiden Seiten verwiesen hat, dass der Code alle für beide Seiten enthält.

$(document).ready(function() { 
    Init(); 
    InitPage1(); 
    InitPage2(); 
}); 

Der Vorteil ist, dass jede Seite nur 1 JavaScript-Dateianforderung erstellt, was den Overhead reduziert.

Der Nachteil ist, dass unnötiger Code in $(document).ready() jetzt für beide Seiten ausgeführt wird.

Option 3 ?:

Gibt es eine bessere Option Ich erwäge nicht?

SCHLUSSERWAEGUNGEN:

Das Hauptanliegen hier ist das, was ideal ist, wenn Dutzende von Seiten ihren eigenen JavaScript-Code benötigen, das wird nirgendwo anders geteilt?

Anfragen für einzelne Dateien können teuer sein. Ich sehe 100-450ms für jede JavaScript-Dateianforderung für eine meiner Websites, wobei praktisch die gesamte Zeit in Richtung "Warten" anstatt "Herunterladen" geht, was bedeutet, dass der Engpass auf die Anfrage selbst und nicht auf die Dateigröße zurückzuführen ist dh wenn 5 einzelne JS-Dateien jeweils 200ms zum Laden benötigen (1sec insgesamt), wären sie, wenn sie alle zu einer Datei zusammengefasst würden, praktisch irrelevant und die Anfrage sollte nur etwa 200ms insgesamt dauern (vielleicht sehr geringfügig höher, 50ms oder weniger, um die zusätzlichen Daten zu laden).

Also meine Hypothese wäre, dass die Kombination alles in 1 Datei ideal wäre, aber es scheint nur extrem schlampig irrelevanten Code auf jeder Seite ausgeführt zu haben, besonders wenn der irrelevante Code aus irgendeinem Grund eine hohe Ausführungszeit hatte. Was ist die beste Vorgehensweise für den Umgang damit?

Answer 1

Ihr zweiter Code funktioniert nicht als InitPage2 ist möglicherweise keine Funktion. Aber das ist, was wenn elnes sind:

$(document).ready(function() { 
Init(); 
if(InitPage1) InitPage1(); 
if(InitPage2) InitPage2(); 
}); 

Allerdings ist dieser Code nicht wirklich trocken. Sie könnten also etw wie ein core.js erstellen, in dem Sie einige allgemeine Dinge zu tun, die überall benötigt wird, dann können Sie diese Funktionen in Ihre Erweiterungen nennen:

var onready=[]; 
$(document).ready(function() { 
onready.forEach(func=>func()); 
onready={push:func=>func()}; 
}); 

In Ihrer Erweiterungen:

onready.push(_=>alert("Wohoo!"));