Ładowanie głównego javascript na każdej stronie? Czy dzielisz go na odpowiednie strony?

Mam 700kbzdekompresowany plik JS, który jest ładowany na każdej stronie. Zanim miałem 12pliki javascript na każdej stronie, ale aby zredukować żądania HTTP, skompresowałem je wszystkie 1 file.

Ten plik jest ~130kb gzippedi jest obsługiwany gzip. Jednak na komputerze lokalnym jest nadal rozpakowywany i ładowany na każdej stronie. Czy to problem z wydajnością?

Wyprofilowałem javascript za pomocą firebug profilera, ale nie zauważyłem żadnych problemów. Problem / iluzja, z którą mam do czynienia, polega na tym, że w tym pliku są skompresowane biblioteki jquery, które czasami nie są używane na bieżącej stronie.

Na przykład jquery datatablesjest skompresowany z prędkością 200 KB i jest ładowany tylko na 2 stronach mojej witryny. Inna jest jqploti to jest inna 200kb.

Mam teraz 400kbnadmiar kodu, który nie jest wykonywany na 80%stronach.

Czy powinienem zostawić wszystko w 1 pliku?

Czy powinienem wyjąć biblioteki jquery i załadować tylko odpowiednią JS na bieżącej stronie?

Za pomocą metody wymaganej można dynamicznie ładować potrzebne biblioteki tylko na tych stronach. Następnie wystarczy załadować wymagane pliki (około 14 KB) na wszystkie strony, oszczędzając około 385 KB.

Integracja jest również bardzo łatwa: wystarczy „owinąć” kod wymaganym kodem:

require(["jquery", "jquery.alpha", "jquery.beta"], function($) {
    //the jquery.alpha.js and jquery.beta.js plugins have been loaded.
    $(function() {
        $('body').alpha().beta();
    });
})

Jeśli Twój framework / CMS / cokolwiek posiada odpowiednie funkcje, możesz dołączyć skrypty warunkowo, jak sugeruje @Michael, ale bez dodatkowej biblioteki.

Biorąc na przykład przypadek danych, WordPress może poradzić sobie z sytuacją poprzez:

// For reference; this isn't functional code.
if (is_page('whatever')) {
    <script src="/path/to/datatables.js"><script>
    <script>
        [Your datatables setup here]
    </script>
}

Z RequireJS nie ma nic złego; musisz tylko ocenić, czy dodatkowy poziom złożoności, który dodaje (plus nauka korzystania z niego w pierwszej kolejności) równoważy to, co mogą zrobić dla ciebie bardziej dostępne narzędzia. Jeśli masz tylko dwa przypadki wymienione powyżej, może to być lepsza opcja. Jeśli dzieje się o wiele więcej, RequireJS może być lepszym rozwiązaniem.

700 kB JavaScript to problem z wydajnością, ponieważ musi zostać przeanalizowany po załadowaniu strony. Z tego powodu należy uważać, aby załadować tylko te skrypty, które są potrzebne. Jeden duży JavaScript może być OK na pełnych stronach AJAX, takich jak GMail, gdy nawigacja jest obsługiwana wewnętrznie bez opuszczania pojedynczej strony. Jednak nawet pełne witryny AJAX wykonują dynamiczne ładowanie JS, aby zapobiec ładowaniu niepotrzebnego JS podczas uruchamiania (zarówno problemów z pamięcią, jak i szybkością).

Powiedziałeś, że chcesz zmniejszyć ruch HTTP. Powinieneś grać z buforowaniem HTTP . Problem polega na tym, że zmiany w JS mogą nie być widoczne, dopóki pamięć podręczna nie wygaśnie, jeśli czas wygaśnięcia jest zbyt wysoki.

Istnieje jednak sztuczka, do której się nie odwołujesz myscript.js, ale myscript.js?version={myversion}. Po aktualizacji aplikacji zmieniasz {myversion}i wymuszasz przeładowanie JavaScript.

~ 700kb JavaScript to problem z wydajnością i jeśli zostanie skompresowany, musimy przestrzegać zasad, których należy przestrzegać podczas optymalizacji kodu:

1. Minify Javascripts - po prostu kompresujesz i dekompresujesz, co nie zmniejszyło kodu, przede wszystkim skorzystaj z dobrego narzędzia Minify JS i zminimalizuj swój kod. Masz 12 plików, a każdy plik będzie osobno Minify przed klubowaniem, aby uzyskać najlepszą wydajność.

2. Użyj asynchronicznego ładowania javascript , używając asynchronicznego ładowania powoduje bardzo szybki czas ładowania i renderowania strony. Wpływ użytkownika jest bardzo silny, ponieważ dobre ładowanie asynchroniczne nie blokuje procesu renderowania, a wyczuwalny czas ładowania strony jest znacznie skrócony. Obrazy i inne wyświetlane elementy będą normalnie wyświetlane, gdy javascript nie zostanie załadowany.

3. Użyj GOOGLE cdn do JQUERY ; Myślę, że używasz JQUERY i ładujesz ją ze swojej strony internetowej, co jest dodatkową zaletą, skorzystaj z GOOGLE CDN ​​(bezpłatnie), aby załadować JQUERY. Ponieważ jest używany przez prawie każdą trzecią stronę internetową, a zatem jest już dostępny na komputerze klienckim w pamięci podręcznej.

4. Nagłówki niestandardowe długie wygasają : W pewnym sensie, w jaki sposób strona ładuje się z problemem ładowania, musisz podać Długie wygasanie dla plików HTTP JS, aby nie można ich było pobrać za każdym razem, co zmniejszy żądanie po raz drugi. Według moich badań czas ładowania na drugiej stronie ma więcej wyjść w porównaniu do pierwszej wizyty na stronie.

5. Sprawdź za pomocą szybkości strony : czasami inne zasoby również wpływają na szybkość ładowania strony, a także próbują zoptymalizować inne zasoby. Wykonując trochę kroku na każdym zasobie, poświęć więcej czasu naszemu ładowaniu JS.