Jeden duży, a wiele małych plików .js, Co lepsze? Opcje

[czarek1986]

Witam.

Zastanawiam się co jest lepsze. Czy lepiej jest includować do strony jeden duży plik javascript ze wszystkimi instrukcjami, czy może lepiej jest je pogrupować na wykonywane funkcje i podzielić na pare plików? Które rozwiązanie jest wydajniejsze, praktyczniejszcze itp?

Mi wydaje się co do praktyczności, że dzielenie na pliki jest dobrym pomysłem bo pozwala uporządkować skrypt, tak jak dzieli się na wiele plików wszelkie duże aplikacje. Może mieć to jednak wady w przypadku wczytywania plików, gdyż jeden wczytujący się bardzo długo, może opóźnić działanie pozostałych skryptów nawet o kilkadziesiąt sekund.

A jak wy myślicie?

[wookieb]

Na początku pracuj na wielu, pod koniec połącz wszystko w jeden.

gdyż jeden wczytujący się bardzo długo, może opóźnić działanie pozostałych skryptów nawet o kilkadziesiąt sekund.

Identycznie działa to w drugą stronę, w końcu trzeba załadować taką samą ilość informacji.

Każdy zewnętrzny plik to żądanei dla serwera na które musi odpowiedzieć. Im więcej żądań tym gorzej. Dla twojej ciekawości spójrz w zakładkę Sieć w Firebugu i przejrzyj linię czasową ładowania plików JS

P.s. Na ten myk o którym mówisz wyżej jest jedna rada. Umieścić taki plik (raczej wymagany sam jeden plik js) na koniec sekcji BODY - takie są zalecenia m.in Yahoo

Ten post edytował wookieb 12.04.2010, 22:13:26

[WebSee]

Ja bym zrobił kilka mniejszych plików, dlaczego?
1. Łatwiej się odnaleźć w mniejszych plikach
2. Jeżeli na danej podstronie nie używasz któregoś z plików, po prostu go nie includujesz

Może gdy ten "duży" plik będzie miał, 1000 linijek, to jeszcze będziesz mógł się w nim połapać, lecz jeżeli mowa to o 10 - 100 tyś linijek, to zdecydowanie lepszych jest kilka mniejszych plików, ale bez przesady, nie żeby robić np 100 plików po 10 linijek

[vokiel]

Nie widzę większego sensu ładowania pliku z x funkcjami, z których na danej podstronie zostanie użyta tylko jedna. To jest nadmiarowość, której raczej trzeba unikać.
Poza tym edycja jednego tasiemca a edycja kilku plików, konkretnie powiązanych z daną stroną, z sensownym nazewnictwem to całkiem inna bajka.

Jeśli chodzi o dołączanie kilku plików do jednej strony. Oczywiście do takiej konieczności na pewno dojdzie. Rozwiązanie jest proste, łączenie tych plików w jeden, do tego cache i wszystko dobrze działa.

[czarek1986]

Może wyjaśnie czemu zadałem te pytanie i wtedy pomożecie mi wybrać rozwiązanie. Otóż chcialbym zbudować (co ostatnio jest modne ) cmsa opartego o extjs. Co to jest nie bede pisał, bo kto ma wiedziec to już pewnie ją zna lub znajdzie w necie informacje . Jak wiadomo działa ona praktycznie całkowicie w oparciu o ajax, więc kodu javascriptowego jest bardzo dużo, dodatkowo jakieś pluginy itp. Z tego powodu pomyślałem, że jeśli cms będzie oparty o widok borderLayout, a poszczególne funkcje będą otwierane w formie zakładek, to kod każdej zakładki mógłby się znaleźć w oddzielnym pliku. Pozwoliło by to w przyszłości łatwiej dodawać nowe możliwości do poszczególnych funkcjonalności.

[flashdev]

Google w narzędziach dla webmasterów pisze:

Połącz zewnętrzne pliki JavaScript
Liczba plików JavaScript pochodzących z adresu *****.pl wynosi: 2. Należy je połączyć w jak najmniejszą liczbę plików:

Wychodzi na to, że google zaleca małą ilość plików .js i ja bym się trzymał tej wersji. Myślę, że wiedzą co piszą.

Ten post edytował flashdev 13.04.2010, 01:19:12

[melkorm]

Najlepszym rozwiązaniem jest zmniejszenie ilości załączanych plików do jak najmniejszej liczby czyli po jednym pliku JS / CSS.

Ja to zrobiłem tak iż mam w pliku *.ini spis resourców, takich jak jQuery, tinymce, swfuploader, swfobject ... itp. W momencie gdy potrzebuje jakiegoś resource na podstronie wrzucam

[PHP] pobierz, plaintext 
$thid->_addViewResource(  ); // array / string resourców
[PHP] pobierz, plaintext 

Do tego w pliku *.ini mam hierarchie resource'ów - który po którym dziedziczy, czyli jak chce coś skorzystać z jQuery nie muszę się martwić już o załączenie jQuery, robi to za mnie skrypt.

Teraz najważniejsze: gdy ładowane są resourcy do strony tworzony jest plik _cached_md5. (css / js) który zawiera połączone pliki js lub css które wykorzystuję na stronie, na wersji development plki się zawsze tworzą i nie jest dokonywana kompresja pliku (wycinanie białych znaków itp~~), zaś na produkcji pliki są cachowane, oczywiście dla każdej sytuacji (innej kombinacji resourców) jest inny plik, ale zawsze jeden i do tego skompresowany.

Wydaje mi się że jest no najlepsze wyjście niż robienie to ręcznie lub załączania wielu plików, chociaż ciekawi mnie jakie mogą być tego minusy

Edit:
Plusy:
- możliwość posiadania wielu plików js / css, nawe dla każdej podstrony inny tylko to co potrzebujemy - a na stronei zawsze będzie jeden
- łatwość w dorzucaniu nowych plików, zamiast np. dorzucać 10 plików wpisujemy tylko nazwę resource'u jaki chcemy dodać

Minusy:
- kontrolowanie kolejności plików w pliku ini
- gdy brak PHP w wersji 5.3 mniejsza możliwość dodawania plików oddzielnie z wykorzystaniem pliku ini (ustawianie flagi na append powoduje że plik dodaje się normalnie i oddzielnie od tego generowanego)

Ten post edytował melkorm 13.04.2010, 13:25:19

[flashdev]

Rozwiązanie jest na pewno bardzo wygodne a jednocześnie wydajne, jednak podstawowoym minusem tego rozwiązania jest to, że trzeba sobie napisać odpowiedni kod do takiej obsługi tych plików.
Chyba, że polecisz coś gotowego?

[melkorm]

Ja użyłem gotowych klas do zmniejszania plików CSS i JS, wystarczy poszukać trochę w necie by takie znaleźć, zaś całą obsługę napisałem sam, ale z użyciem ZF.