Useaan tiedostoon pilkotun javascriptin liittäminen sivulle:
Ideahan tässä on että saa yksinkertaistettua HTML-tiedostoa jos vaikka moni sivu käyttää samaa scriptiä.
Scripti sijoitetaan body-elementin loppuun, jotta saadaan illuusio nopeammasta sivun latautumisesta.
//.html <body> //... <script id = "scriptTo" src = "load.js"></script> </body>
load.js taikoo script-elementtejä scriptTo-id:hen.
//load.js
function load(file_name) {
var scriptFrom = document.createElement('script');
scriptFrom.type = 'text/javascript';
scriptFrom.src = file_name;
document.getElementById("scriptTo").appendChild(scriptFrom);
}
load("jotain.js");
load("jotain2.js");
load("http://jotain.org/scripti.js");
load("jotain3.js");
load("main.js");Ok, entä miten handlaat, että skripti A (esim. oma skripti) suoritetaan kun skripti B (esim. jquery tms. js-kirjasto) on ladattu?
Täysin turha idea ja vanhanaikainenkin. Et kertonut mitään perustelua sille, miksi HTML-dokumenttia pitäisi "yksinkertaistaa"? Yksi hyvä syy skriptitagien karsimiseen on HTTP-pyyntöjen määrän vähentäminen, mutta tämä purkka ei siinä auta laisinkaan: pyyntöjähän tulee päin vastoin yksi lisää!
Purkkasi toimii sitä paitsi ihan väärin. Et voi asettaa uutta script-elementtiä toisen sisälle. On myös täysin turhaa asettaa scriptille type-attribuuttia, koska kyseinen arvo on attribuutit implikoitu oletusarvo.
Lebe80 kirjoitti:
Ok, entä miten handlaat, että skripti A (esim. oma skripti) suoritetaan kun skripti B (esim. jquery tms. js-kirjasto) on ladattu?
Load-funktioiden järjestyksellä.
The Alchemist kirjoitti:
Et kertonut mitään perustelua sille, miksi HTML-dokumenttia pitäisi "yksinkertaistaa"?
Siinähän se on mainittu toisessa lauseessa...
Jos tuo on ainoa syy, niin sitten ollaan todella heikoissa kantimissa. Parempi idea olisi bundlata kaikki skriptit yhteen tiedostoon ihan oikeasti, eli siten että palvelimelta ladataan vain yksi filu ja se sisältää koko sivustolla ajettavat skriptit.
Niinhän siinä käytännössä tapahtuu.
Selain cachee tämän load.js möykyn mitä se sitten käyttää uudelleen.
Brebl kirjoitti:
Niinhän siinä käytännössä tapahtuu.
Selain cachee tämän load.js möykyn mitä se sitten käyttää uudelleen.
Mutta usea requestihan tuosta tulee. Mieluusti vaan joku webpack hoitamaan skriptien yhdistely yhdeksi isoksi köntiksi. Requestien määrä kuitenkin on kriittisempi, kuin koko.
Lebe80 kirjoitti:
Mutta usea requestihan tuosta tulee.
Niin riippuen kakutussäännöillä myöhemmillä latauksia ei tule uusia pyyntöjä. Kuitenkin ensimmäisellä sivulatauksella (joka muutekin on hitain ja kriittisin) tulee ylimääräinen pyyntö, joten ratkaisu vaikuttaa jo sen takia huonolta.
Lebe80 kirjoitti:
Mieluusti vaan joku webpack hoitamaan skriptien yhdistely yhdeksi isoksi köntiksi. Requestien määrä kuitenkin on kriittisempi, kuin koko.
Paketointi yhdeksi tiedostoksi voi olla hyvä idea, mutta toisaalta jos sivuilla on vaikka vain hyvin yleiseset kirjastot kuten bootstrap ja jquery, joilla on yleisesti käytettävissä oleva CDN, niin silloin voi olla järkevintä viitata html-sivulta suoraan niihin niin selaimen ei tuurilla tarvitse tehdä yhtään requestia sen html:n lisäksi.
Siihen tarpeeseen, että pitäisi sama kirjastosetti ladata useammalla sivulla, tuo Brebl:n koodi on sinänsä mahdollinen ratkaisu. Käytännössä järkeviä työkaluja käyttäen ko. tarvetta ei kuitenkaan ole, vaan sivustolla yleensä käytetään pohjaa, webpackia, tms niin että peruskirjastoja ei tarvitse kirjoitella jokaiselle sivulle erikseen.
CDN:n käyttö on omasta mielestäni aivan aivokuollut ajatus. Aina, aina, kun sivun lataaminen pykii ja on ongelmia, niin, syynä on ruuhkautunut CDN-palvelin. Parasta on hostata samalta palvelimelta kuin muukin osa sivustosta.
Webpack on kyllä siitäkin hyvä, että voi bundlettaa chunkeiksi ja ladata sivuilla vain ne chunkit mitä tarvitsee, oli sitten osa koodia, koodilohkojen ja riippuvuuksien ketjutusta tai isompia kokonaisuuksia.
Aihe on jo aika vanha, joten et voi enää vastata siihen.