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:
- 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.
- 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.
- 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.
- 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ć.