Pytanie Co robisz z kodem JavaScript przed wdrożeniem?


Czy masz krok w procesie wdrażania, który minimalizuje JS? Czy posiadasz jakiś preprocesor dla JavaScript, który pozwala ci pozostawić komentarze i konsole, a potem automatycznie je usunąć? Czy Twój JavaScript został wygenerowany przez GWT lub Script #? Czy używasz ANT lub innego narzędzia do automatyzacji wdrażania?

Widzę wiele skryptów JavaScript, które wyglądają tak, jakby zostały wydane prosto z edytora, z dużą ilością spacji i komentarzy. Ile z tego wynika z braku dbałości o stan wdrożonego kodu i ile wynika z ducha otwartej sieci?


14
2018-06-04 18:55


pochodzenie


Jeśli obawiasz się współczynnika kompresji, ta strona zawiera ładny przegląd wskaźników, które niektóre narzędzia osiągają z najpopularniejszymi bibliotekami javascript: compressorrater.thruhere.net. - ChristopheD
Ostatnio zastanawiałem się nad tym z perspektywy "najlepszej praktyki". Informatyk we mnie mówi, że serwer powinien obsługiwać kompresję, a nie programistę. Zrobiłem taniej profilowanie na mootools i odkryłem, że wstępne kompresowanie z YUI lub cokolwiek daje marginalną poprawę rozmiaru ponad standardowym gzipem, który jest tym, co używałby serwer WWW. Ale czy ten margines warty jest kłopotów i potencjalnej obrazy przeciwko "duchowi otwartej sieci"? - Ben Dunlap
@Ben Dunlap: wtedy robisz oba: minify AND gzip. Możesz zminimalizować za pomocą skryptu budowania produkcji, a serwer zajmie się gzipowaniem. - montrealist
@dalbaeb, tak wiem - właśnie to testowałem; Przepraszam, jeśli to było niejasne. Wziąłem zminimalizowaną wersję mootools i zgrałem go, a następnie porównałem wynik do gzip surowej wersji mootools. Różnica była dość niewielka, a więc moje pytanie brzmi: jeśli serwer sieciowy i tak powinien gzipować wszystkie odpowiedzi, co zyskuję przez zminimalizowanie? Ponieważ wiem, co ja stracić przez zminimalizowanie: czytelność kodu dla czytników stron trzecich i mój czas (kiedy muszę wprowadzić zmiany w kodzie zwolnienia). Próbuję przeprowadzić analizę kosztów i korzyści, jak sądzę. - Ben Dunlap
To, co zyskujesz przez zminimalizowanie, zależy od tego, ile masz kodu. Nawet posiadanie krótszych nazw zmiennych / funkcji może czasami zmniejszyć ogólną wielkość i czas pobierania. Mówimy tu o milisekundach, to prawda. Ale im mniej użytkownik czeka, tym lepiej. Poza tym, jeśli zmarnujesz tylko produkcje, nadal będziesz mieć swoją czytelną wersję "dev", nad którą możesz pracować. Przejrzystość dla czytelników stron trzecich - tak, to będzie cierpieć. Ponownie, zależy to od tego, jak cenne jest to dla Ciebie. - montrealist


Odpowiedzi:


Moje kroki obejmują:

  1. Piszę JavaScript używając TextMate z zainstalowanym pakietem Javascript Tools. To JSLint to moje pliki przy każdym zapisie i powiadamia mnie, gdy wystąpią błędy.
  2. używam Koła zębate automatycznie łączyć moje różne pliki JavaScript.
  3. Uruchamiam wynikową konkatenację przez jsmin, aby wygenerować minified wersję.

Kończę się połączonym plikiem lib.js i zminimalizowanym plikiem lib.min.js. Jeden używam do rozwoju, jeden do produkcji. Polecenia TextMate pomagają zautomatyzować to wszystko.

Nadal szukam dobrego rozwiązania, aby faktycznie (jednostka) przetestować moje skrypty.


4
2018-06-04 22:31



Czy muszę znać Ruby, aby używać Sprockets? Czy mogę po prostu zainstalować Ruby i nauczyć się Sprockets? - Nosredna
@Nosredna: Nie musisz znać Rubiego, ale pomaga to dostosować. Wzywam Sprockets ze skryptu Ruby, ale ma również narzędzie wiersza poleceń. - avdgaag
Na marginesie, "odpowiednik" okna TextMate to e-texteditor, który również ściąga pliki. - karlipoppins


Zwykle to sprawdzam JSLint aby upewnić się, że jest wolny od błędów, a następnie spakuj go / zakoduj za pomocą Kompresor YUI.


11
2018-06-04 19:01



Zauważmy, ale JSLint nie sprawdza skryptu, aby upewnić się, że jest to błąd z operacyjnego punktu widzenia (np. Test zakresu sprawdza właściwy zakres), ale aby dwukrotnie sprawdzić składnię, aby upewnić się, że nie zrobiłeś nic złego . - rjzii
Zgadza się. Dziękuję za wskazanie. - karlipoppins


Sprawdzić Kompresor YUI to aplikacja konsolowa, której możesz użyć do minimalizowania (usuwania komentarzy, spacji itp.), a także zaciemniania plików javascript.


2
2018-06-04 19:00





JSMin to od Douglasa Crockforda. Mamy go podłączonego jako makra w Studio, a także element do tworzenia postów dla niektórych naszych większych projektów


2
2018-06-04 19:19





FWIW, oto ciekawy mini-benchmark na różne sposoby minimalizowania źródła Javascript:

http://www.ericmmartin.com/comparison-of-javascript-compression-methods/ 

W skrócie:

  •  Kompresja gzip w protokole HTTP naprawdę robi różnicę (chociaż trzeba zapłacić koszt procesora po stronie serwera)
  •  zminimalizowanie (usunięcie białych znaków / komentarzy, zmiana nazw zmiennych itp.) również pomaga, a jeśli chcesz uzyskać najlepszy rezultat, użyj go razem z kompresją gzip
  •  Dekompresory oparte na js są najprawdopodobniej bezużyteczne - podczas gdy możesz uzyskać mniejszy rozmiar, obciążenie procesora na kliencie jest znaczące.

2
2018-06-30 00:02



+1 dla niektórych trudnych danych. - Colonel Sponsz


W przypadku jednego z naszych produktów łączymy wszystkie pliki JavaScript razem (większość plików jest używanych na większości stron, więc ma to dla nas sens) i wykorzystania JavaScript :: Minifier. To dało nam całkiem niezłe przyspieszenie prędkości.


1
2018-06-04 19:02





Wiele z nich prawdopodobnie wynika z tego, że nie troszczymy się o ludzi, którzy oglądają twoje strony na wolniejszych komputerach z wolniejszymi połączeniami i zakładając, że każdy ma linię 50 Mb / s i trzy gigabajty pamięci RAM.

Minimalizujemy nasze (ręcznie napisane + wtyczki, jQuery itp.) JS jako część procesu budowania w środowisku .NET. Bez preprocesora, to jest coś, co powinniśmy zdecydowanie robić, gdy tylko pozwolimy na to.

P.S. Nawiasem mówiąc, nie używamy console.log, ponieważ złamie to IE. Zamiast tego mamy prostą funkcję opakowania, coś takiego:

function log(stuff) {
    if (window.console && window.console.log) {
        console.log(stuff);
    }
};

1
2018-06-04 19:16



Jakiego rodzaju bibliotek JavaScript piszesz, gdzie minify miałoby naprawdę nietrywialny wpływ na wolną pamięć RAM użytkownika końcowego? - Ben Dunlap
Tak, to prawda, przepraszam. Proszę pominąć bit RAM. Minowanie nie ma oczywiście wpływu na pamięć RAM, po prostu rzuciłem kwestię pisania kodu jakości bez powodu. - montrealist


Mam skrypt PHP, który robi to po stronie serwera i przechowuje pamięć podręczną cokolwiek pobiera z folderów źródłowych.


1
2018-06-05 03:07





Jedno słowo- pakowacz


0
2018-06-04 18:57



Większość bibliotek przeniosła się z packera i do miniarki z gzipem. Packer zużywa cenny czas, ponieważ sam się rozpakowuje. - Nosredna


Zapal świeczkę, wyszeptaj modlitwę o błędy IE6 i kliknij "idź". To się liczy? :)


0
2018-06-04 19:23



Tak, ale myślę, że potrzebujesz czegoś mocniejszego niż szept, żeby poradzić sobie z IE6. - Nosredna
Czy próbowałeś poświęcić zwierzęta gospodarskie? - SingleNegationElimination