Czy powinienem łączyć pliki js / css w jeden plik?

Zarówno YSlow, jak i dodatki Google Page Page zalecają łączenie plików skryptów (i stylów) w jednym pliku, aby zmniejszyć liczbę żądań HTTP, i z pewnością widzę sens, gdy pliki skryptów są spójne w całej witrynie, ale dla aplikacji internetowej, która ma różne wymagania w całej witrynie.

Według mnie jest kilka opcji:

1. Połącz wszystkie pliki, które są używane w witrynie, a każda strona otrzyma ten sam połączony plik - wadą jest nieużywana zawartość zaśmiecająca skrypt (i cięższe pierwsze ładowanie (również ładowanie ponownie, gdy zmienia się skrypt komponentu))

2. Łącz pliki na podstawie strony - wadą jest to, że każda strona o różnych wymaganiach otrzymuje inny plik łączony (większe ładowanie pierwszego dla każdego typu strony)

3. Zignoruj ​​ścisłą interpretację rekomendacji „tylko jeden plik” i niech strona ładuje się w wielu plikach odpowiednio, z buforowaniem, miejmy nadzieję, negując liczbę żądań HTTP w ogólnym przypadku - wadą jest liczba żądań HTTP na każdej stronie

Myśli?

Opcja 2 jest najgorsza; oznacza to, że każda strona z inną kombinacją potrzebnych skryptów JS spowoduje żądanie HTTP. Znacznie pogorszy to wydajność .

Opcja 1 jest najlepsza. Ostatecznie większość użytkowników odwiedzi większość „typów” stron Twojej witryny, więc nadal korzystne jest łączenie wszystkiego w jeden plik, z wyjątkiem być może dużych plików JS, które są potrzebne na kilku rzadko odwiedzanych stronach.

Pierwsze trafienie strony może być wolniejsze niż w przypadku innych plików, ale nadal warto to robić, ponieważ każde inne trafienie strony użyje buforowanej globalnej JS.

Jedna wskazówka; scal je automatycznie, jeśli jeszcze tego nie zrobiłeś!

Ogólnie łączę „globalny Javascript” - jQuery i popularne wtyczki - w jeden plik, a następnie, w razie potrzeby, wyświetlam dodatkowe wtyczki jako osobne pliki.

Na przykład, w jednej witrynie, którą prowadzę, wiele stron ma tabele danych, więc mam global.jsjQuery, DataTables i SuperFish (do mojego menu). Witryna zawiera dwie strony wykorzystujące „lightbox”, więc mam osobny skrypt dla tych dwóch stron.

W przypadku CSS obsługuję tylko jeden plik dla całej witryny i staram się, aby CSS był jak najbardziej ogólny - większość stron ma tylko kilka unikalnych elementów CSS.

Chociaż zdecydowanie zaleca się używanie jak najmniejszej liczby plików, może się okazać, że masz podział na funkcje wymagane przy ładowaniu strony oraz funkcje, które można odroczyć poprzez ładowanie asynchroniczne.

Jeśli wystarczająca część Twojego JS może zostać przesunięta do drugiej kategorii, możesz poprawić postrzeganą początkową szybkość ładowania strony, zapewniając lepsze wrażenia dla użytkowników.

Nie sugerowałbym łączenia ich wszystkich. Jeśli korzystasz ze wspólnej biblioteki, możesz wykorzystać CDN do dostarczenia skryptów javascript. Następnie możesz skorzystać z buforowania przeglądarki (zakładając, że inne strony używają tego samego CDN) i dostarczania rozproszonego. Zarówno Microsoft, jak i Google mają rozwiązania (ja też nie korzystałem uczciwie, ale na pewno zacznę) i mogą być też inne. W powiązanej notatce SO ma następujące pytanie:

Kiedy przeglądarka automatycznie usuwa pamięć podręczną JavaScript?

a pierwszą odpowiedzią jest solidne złoto.