Jak obsługiwać pliki javascript i css w witrynie?

Question

Mam ostatnio kilka myśli na temat obsługi wspólnych plików javascript i css w aplikacji internetowej.

W obecnej aplikacji internetowej, nad którą pracuję, mam dość dużą liczbę różnych javascripts i plików css, które są umieszczone w folderze na serwerze. Niektóre pliki są ponownie wykorzystywane, podczas gdy inne nie.

W witrynie produkcyjnej dość głupio jest mieć dużą liczbę żądań HTTP i wiele kilobajtów niepotrzebnego javascript i zbędnego css. Rozwiązaniem tego problemu jest oczywiście utworzenie jednego dużego pliku dołączanego do strony, który zawiera tylko niezbędne informacje, które następnie są minimalizowane i przesyłane do klienta w formie skompresowanej (GZIP).

Nie ma obaw, aby utworzyć pakiet plików javascript i zminimalizować je ręcznie, jeśli zamierzałeś to zrobić raz, ale ponieważ aplikacja jest ciągle utrzymywana, a rzeczy zmieniają się i rozwijają, to wkrótce staje się ból głowy, aby to zrobić ręcznie podczas wysyłania nowych aktualizacji, które udostępniają zmiany do javascripts i/lub plików css do produkcji.

Jakie jest dobre podejście do radzenia sobie z tym? Jak sobie z tym poradzić w swojej aplikacji?

Answer 1

To, o czym mówisz, nazywa się minification.

Istnieje wiele bibliotek i pomocników dla różnych platform i języków, które mogą w tym pomóc. Ponieważ nie publikujesz tego, czego używasz, nie mogę wskazać ci czegoś, co bardziej pasuje do ciebie.

Oto jeden projekt w google code - minify.

Here to przykład handler'a Http .NET, który robi to wszystko w locie.

Answer 2

Pliki CSS można podzielić na kategorie i partycjonować na części logiczne (np. Wspólne, drukuj, vs.), a następnie można użyć funkcji importowania CSS do pomyślnego załadowania plików CSS. Ponowne użycie tych małych plików umożliwia również korzystanie z buforowania po stronie klienta. Jeśli chodzi o JavaScript, myślę, że możesz rozwiązać ten problem po stronie serwera, wiele plików skryptów dodanych do strony, możesz także dynamicznie generować stronę serwera skryptów, ale aby buforowanie po stronie klienta działało, te części powinny mieć inne i adresy statyczne.

Answer 3

Mam do czynienia z dokładnie ten sam problem na stronie, którą uruchamiam.

Niedawno dowiedziałem się o projekcie o nazwie SquishIt (patrz: GitHub). Jest zbudowany na platformie Asp.net. Jeśli nie używasz asp.net, nadal możesz dowiedzieć się o zasadach stojących za tym, co tutaj robi.

SquishIt pozwala na tworzenie nazwanych "pakietów" plików, a następnie renderowanie tych połączonych i zminimalizowanych pakietów plików w całej witrynie.

Answer 4

Jakiś czas temu napisałem program obsługi ASP.NET, który łączy, kompresuje/minimalizuje, gzipuje i buforuje surowe pliki kodu źródłowego CSS i JavaScript na żądanie. Wnieść w trzech plikach CSS, na przykład, to będzie wyglądać to w znacznikach ...

<link rel="stylesheet" type="text/css" 
     href="/getcss.axd?files=main;theme2;contact" /> 

getcss.axd obsługi czyta w ciągu zapytania i określa, które pliki to musi przeczytać i Minify (w tym przypadku będzie szukał plików o nazwie main.css, theme2.css i contact.css).Po zakończeniu czytania w pliku i skompresowaniu go, przechowuje duży miniony ciąg w pamięci podręcznej po stronie serwera (RAM) przez kilka godzin. Zawsze najpierw wyszukuje w pamięci podręcznej, aby przy kolejnych żądaniach nie musiał ponownie kompresować.

Kocham to rozwiązanie, ponieważ ...

• Zmniejsza liczbę żądań jak najwięcej
• żadne dodatkowe czynności są wymagane do wdrożenia
• Jest bardzo łatwe w utrzymaniu

Jedynym minusem jest to, że cały styl/kod skryptu zostanie ostatecznie zapisany w pamięci serwera. Ale obecnie RAM jest tak tani, że nie jest tak wielki jak kiedyś.

Warto również nadmienić, że ciąg kwerendy nie jest podatny na żadne szkodliwe manipulacje ścieżkami (dozwolone są tylko A-Z i 0-9).

Answer 5

Zbudowałem bibliotekę, Combres, która dokładnie to robi, tj. Minify, łączenie itp. Automatycznie wykrywa również zmiany w lokalnych i zdalnych plikach JS/CSS i przesyła najnowsze do przeglądarki. To jest bezpłatne & open-source. Sprawdź this article na wprowadzenie do Combres.