Wiele plików w CDN a jeden plik lokalnie

93

Moja witryna wykorzystuje około 10 bibliotek javascript innych firm, takich jak jQuery, jQuery UI, prefixfree, kilka wtyczek jQuery, a także mój własny kod javascript. Obecnie ściągam zewnętrzne biblioteki z CDN, takich jak Google CDN i cloudflare. Zastanawiałem się, jakie jest lepsze podejście:

  1. Pobieranie bibliotek zewnętrznych z sieci CDN (tak jak robię to dzisiaj).
  2. Połączenie wszystkich plików w jeden plik js i jeden plik css i przechowywanie ich lokalnie.

Wszelkie opinie są mile widziane, o ile są wyjaśnione. Dzięki :)

Tzach
źródło

Odpowiedzi:

139

Wartość CDN polega na prawdopodobieństwie, że użytkownik odwiedził już inną witrynę, dzwoni do tego samego pliku z tego CDN i staje się coraz bardziej wartościowa w zależności od rozmiaru pliku. Prawdopodobieństwo, że tak się stanie, wzrasta wraz z powszechnością żądanego pliku i popularnością CDN.

Mając to na uwadze, pobranie stosunkowo dużego i popularnego pliku z popularnej sieci CDN ma absolutny sens. jQuery i, w mniejszym stopniu, jQuery UI, pasują do tego rachunku.

W międzyczasie łączenie plików ma sens w przypadku mniejszych plików, które prawdopodobnie nie zmienią się zbytnio - Twoje powszechnie używane wtyczki będą pasować do tego rachunku, ale Twój podstawowy kod aplikacji prawdopodobnie nie: może się zmieniać z tygodnia na tydzień, a jeśli ponownie łącząc go ze wszystkimi innymi plikami, musiałbyś zmusić użytkownika do pobrania wszystkiego od nowa.

Standardowy schemat HTML5 całkiem nieźle radzi sobie z zapewnieniem ogólnego rozwiązania tego problemu:

  1. Modernizr jest ładowany z lokalnego w głowie: jest bardzo mały i różni się bardzo od instancji do instancji, więc nie ma sensu pozyskiwać go z CDN i nie zaszkodzi użytkownikowi zbytnio, aby załadować go z twojego serwer. Jest umieszczany w głowie, ponieważ CSS może go używać, więc chcesz, aby jego efekty były znane, zanim ciało wyrenderuje. Wszystko inne znajduje się na samym dole, aby cięższe skrypty nie blokowały renderowania podczas ich ładowania i wykonywania.
  2. jQuery z CDN, ponieważ prawie wszyscy go używają i jest dość ciężki. Użytkownik prawdopodobnie będzie miał to zapisane w pamięci podręcznej, zanim odwiedzą Twoją witrynę, w takim przypadku natychmiast załadują je z pamięci podręcznej.
  3. Wszystkie mniejsze zależności innych firm i fragmenty kodu, które prawdopodobnie nie zmienią się zbytnio, zostaną konkatenowane do plugins.js pliku załadowanego z własnego serwera. Będzie to buforowane z odległym nagłówkiem wygaśnięcia przy pierwszej wizycie użytkownika i ładowane z pamięci podręcznej przy kolejnych wizytach.
  4. Twój podstawowy kod jest wprowadzany main.jsz bliższym nagłówkiem wygaśnięcia, aby uwzględnić fakt, że logika aplikacji może zmieniać się z tygodnia na tydzień lub z miesiąca na miesiąc. W ten sposób, gdy naprawisz błąd lub wprowadzisz nową funkcjonalność, gdy użytkownik odwiedza go za dwa tygodnie, może to zostać załadowane na nowo, podczas gdy cała powyższa zawartość może zostać pobrana z pamięci podręcznej.

W przypadku innych głównych bibliotek należy spojrzeć na nie indywidualnie i zadać sobie pytanie, czy powinny podążać za wskazówkami jQuery, ładować je indywidualnie z własnego serwera, czy też łączyć. Przykład tego, jak możesz podejść do tych decyzji:

  • Angular jest niesamowicie popularny i bardzo duży. Zdobądź to z CDN.
  • Twitter Bootstrap jest na podobnym poziomie popularności, ale masz stosunkowo niewielki wybór jego komponentów, a jeśli użytkownik jeszcze go nie ma, może nie być warto zachęcać go do pobrania pełnej wersji. To powiedziawszy, sposób, w jaki pasuje do reszty kodu, jest dość nieodłączny i prawdopodobnie nie zmienisz go bez przebudowy całej witryny - więc możesz chcieć zachować ją lokalnie, ale przechowywać pliki oddzielnie od main plugins.js. W ten sposób zawsze możesz zaktualizować swoje plugins.jsrozszerzenia Bootstrap bez zmuszania użytkownika do pobrania całego rdzenia Bootstrap.

Ale nie jest to konieczne - Twój przebieg może się różnić.

Barney
źródło
4
Bardzo dobra odpowiedź. Pozwól, aby pamięć podręczna przeglądarki działała za Ciebie. Podoba mi się pomysł oddzielenia popularnych bibliotek od połączonych plików.
Jon,
3
Bardzo pomocna analiza
użytkownik
8
Bardzo dobra odpowiedź. Warto również wspomnieć, że CDN pozwoli użytkownikom na pobieranie plików z serwera „lokalnego” lub przynajmniej bliżej (użytkownika). Więc jeśli twój serwer znajduje się w Europie, użytkownicy z Ameryki Południowej lub Rosji, na przykład, nadal będą otrzymywać pliki stosunkowo szybko.
H.Wolper