Home-theater-designers
Wszyscy tam byliśmy, dowiedziałeś się jak zbudować niesamowitą stronę internetową , ale po opublikowaniu jest nieznośnie powolny.
Zminimalizowanie kodu JavaScript to jeden ze sposobów na przyspieszenie czasu odpowiedzi witryny (wraz z kompresja HTML ) i na szczęście dla Ciebie jest to łatwy proces. Dziś pokażę Ci wszystko, co musisz wiedzieć.
Co oznacza Minifikacja?
Proces minifikacja (lub minifikacja ) to prosta koncepcja. Kiedy piszesz kod w JavaScript lub jakimkolwiek innym języku, istnieje wiele funkcji, które są wymagane tylko po to, aby kod był łatwiejszy do zrozumienia dla ludzi -- komputery nie dbają o to, jak nazywasz zmienne lub ile jest odstępów wokół nawiasów, na przykład.
Minimalizując kod, możesz drastycznie zmniejszyć rozmiar jego pliku. Dzięki temu użytkownicy będą mogli szybciej pobrać mniejszy plik. Jeśli piszesz tylko jedną lub dwie linie JavaScript, prawdopodobnie nie będzie zauważalnej poprawy. Jeśli jednak piszesz dużo kodu lub używasz dużych bibliotek, takich jak jQuery, zauważalny wzrost wydajności i drastyczne zmniejszenie rozmiarów plików są łatwo osiągalne!
Jeśli ładujesz kod z zewnętrznej sieci CDN , na przykład Biblioteki hostowane przez Google , użyłeś kodu skróconego.
malina pi 3 vs b+
Jak wygląda kod skrócony?
Spójrzmy na kilka przykładów. Ciężko dostrzec wpływ minifikacji na małe bazy kodu, więc z góry przepraszam za ich dużą długość.
Oto kilka niezminimalizowany JavaScript z naszego przewodnika po JSON z Pythonem i JavaScript :
// setup some JSON to use
var cars = [
{ 'make':'Porsche', 'model':'911S' },
{ 'make':'Mercedes-Benz', 'model':'220SE' },
{ 'make':'Jaguar','model': 'Mark VII' }
];
window.onload = function() {
// setup the button click
document.getElementById('theButton').onclick = function() {
doWork()
};
}
function doWork() {
// ajax the JSON to the server
$.post('receiver', cars, function(){
});
// stop link reloading the page
event.preventDefault();
}Oto skrócony kod:
function doWork(){$.post('receiver',cars,function(){}),event.preventDefault()}var cars=[{make:'Porsche',model:'911S'},{make:'Mercedes-Benz',model:'220SE'},{make:'Jaguar',model:'Mark VII'}];window.onload=function(){document.getElementById('theButton').onclick=function(){doWork()}};Ta zminimalizowana wersja kodu to 39 procent mniejszy. W tym przykładzie nazwy zmiennych pozostają takie same, ale wszystkie odstępy i komentarze zostały usunięte.
Oto kolejny przykład z naszego przewodnika po jQuery :
// dfd == deferred
var dfd = $.Deferred();
function doThing() {
$.get('some/slow/url', function() {
dfd.resolve();
});
return dfd.promise();
}
$.when(doThing()).then(function(){
console.log('YAY, it is finished');
});Oto skrócony kod:
function doThing(){return $.get('some/slow/url',function(){dfd.resolve()}),dfd.promise()}var dfd=$.Deferred();$.when(doThing()).then(function(){console.log('YAY, it is finished')});Tym razem było tylko 26 procent redukcja -- to wciąż bardzo dobre dla tak małego bloku kodu.
Oto ostatni przykład z naszego przewodnika po JavaScript i DOM :
//declare a new variable to hold a new h1 element
var newHeading = document.createElement('h1');
//add the text node to the document
var h1Text = document.createTextNode('Heading Level 1');
//make it a child node of the new heading
newHeading.appendChild(h1Text);
//append this as a child of element defined as 'bt'
document.getElementById('bt').appendChild(newHeading);Zwróć uwagę, jak są dużo komentarzy i spacji. Zminimalizowana wersja zmniejszyła rozmiar pliku o 52 procent :
czy możesz odzyskać usunięte wiadomości na komunikatorze?
var newHeading=document.createElement('h1'),h1Text=document.createTextNode('Heading Level 1');newHeading.appendChild(h1Text),document.getElementById('bt').appendChild(newHeading);Oto rozmiary niektórych popularnych bibliotek JavaScript w porównaniu z ich zminimalizowanymi wersjami:
Niektóre z tych bibliotek wykazują znaczne zmniejszenie rozmiaru po skompresowaniu ( ~80 procent ), podczas gdy inne nie są tak dobre ( ~40 procent ). To powiedziawszy, wszelkie oszczędności przyspieszą Twoją witrynę dla użytkowników i zmniejszą obciążenie serwera internetowego.
Jak się minimalizujesz?
Teraz wiesz, jak to działa i jak wygląda, zagłębmy się w to, jak to zrobić. Nie martw się, w ogóle nie ma potrzeby ręcznego modyfikowania kodu! Istnieje wiele bezpłatnych narzędzi, które obsługują ten proces za Ciebie.
Działają one na kilka sposobów. Większość narzędzi online umożliwia kopiowanie i wklejanie kodu, który następnie przetwarzają i wracają do Ciebie na stronie. Te narzędzia często pozwalają również przesyłać wiele plików.
Oto krótkie podsumowanie narzędzi online. W większości działają tak samo, więc nie musisz się zbytnio martwić, który z nich wybrać.
JSCompress - Osobiście najczęściej korzystam z tej strony, jeśli jest to tylko szybka praca. Działa szybko, a nawet pokazują narzędzia, których użyli do jego budowy.
Minifikator JavaScript -- To narzędzie działa dobrze, ale naprawdę błyszczy jako API . Pozwala to na zbudowanie własnej integracji lub usługi na istniejącej stronie internetowej.
JavaScript Minifier — kolejna witryna o tej samej nazwie, to narzędzie jest tak proste, jak tylko się da. Żadnych opcji ani menu, tylko jeden przycisk.
Zminifikuj -- Ta strona wygląda niesamowicie, a twórcy wyraźnie zwrócili uwagę na szczegóły.
Ta lista mogłaby ciągnąć się w nieskończoność. Istnieje tak wiele narzędzi online do minimalizowania stron internetowych, że trudno się pomylić.
Narzędzia minifikacyjne istnieją również jako narzędzia wiersza poleceń lub wtyczki do twojego Edytor JavaScript . Narzędzia te są często znacznie szybsze w użyciu i „po prostu działają” z istniejącym kodem. Nie ma potrzeby kopiowania i wklejania oraz nie musisz wyodrębniać kodu JavaScript z kodu HTML lub CSS, który może znajdować się w tym samym pliku.
Jeśli używasz Microsoft Visual Studio, Pakowacz i Minifikator rozszerzenie z rynku ma ponad 600 000 instalacji! Nie tylko to, ale jest regularnie aktualizowane i dostępne na GitHubie .
Jeśli jesteś fanem Wzniosły tekst jak ja, to Zminifikuj pakiet jest tym, który chcesz. Z ponad 61 000 instalacji jest to bardzo popularny pakiet, który również jest dostępne na GitHubie , jeśli chcesz przyczynić się do projektu open source .
Wreszcie, jeśli jesteś PyCharm użytkownik, możesz skonfiguruj go do integracji bezpośrednio za pomocą wielu popularnych narzędzi do kompresji, takich jak Kompresor YUI . Wiele z tych narzędzi bezpośrednio zasila wymienione powyżej narzędzia online.
Zastrzeżenia
Tam ma być haczykiem, prawda? Nic nigdy nie może być doskonałe. Cóż, tak, jest jeden problem, ale jest dość drobny i łatwo go obejść:
Zminimalizowanego kodu nie można przywrócić do pierwotnego stanu.
Kiedy zminimalizujesz dowolny kod, jego pierwotna forma zostanie utracona. Musisz zachować jego kopię, jeśli chcesz mieć nadzieję na łatwe wprowadzanie większych zmian – nie wystarczy używać kontroli wersji.
Chociaż jest to możliwe zminimalizować Twój kod, już nigdy nie będzie taki sam. Po pierwsze, wszystkie twoje cenne komentarze są stracone.
Nie jest to duży problem, ale musisz o tym pamiętać podczas kodowania. Zasadniczo nieskompresowany > rozwój i sprężony > produkcja.
Teraz wiesz już wszystko o minimalizowaniu JavaScriptu! Minifikacja kodu to jeden ze sposobów na wyciśnięcie wydajności z serwera, a robią to wszystkie duże strony internetowe.
Jakich narzędzi używasz do minimalizacji kodu? Czy w ogóle się tym przejmujesz? Daj nam znać w komentarzach poniżej!
dlaczego firefox ładuje się tak długo?
Źródło zdjęcia: NavinTar za pośrednictwem Shutterstock
Udział Udział Ćwierkać E-mail Usuń te pliki i foldery systemu Windows, aby zwolnić miejsce na dyskuChcesz zwolnić miejsce na dysku na komputerze z systemem Windows? Oto pliki i foldery systemu Windows, które można bezpiecznie usunąć, aby zwolnić miejsce na dysku.
Czytaj dalej Powiązane tematy- Programowanie
- JavaScript
- Jawa
- Projektowanie stron
Joe jest absolwentem informatyki na Uniwersytecie w Lincoln w Wielkiej Brytanii. Jest profesjonalnym programistą, a kiedy nie lata dronami ani nie pisze muzyki, często można go spotkać wykonującego zdjęcia lub produkującego filmy.
Więcej od Joe CoburnaZapisz się do naszego newslettera
Dołącz do naszego newslettera, aby otrzymywać porady techniczne, recenzje, bezpłatne e-booki i ekskluzywne oferty!
Kliknij tutaj, aby zasubskrybować