Συμπιεστές JavaScript: Πώς και γιατί να ελαχιστοποιήσετε το JS σας

Συμπιεστές JavaScript: Πώς και γιατί να ελαχιστοποιήσετε το JS σας

Όλοι ήμασταν εκεί, το μάθατε πώς να φτιάξετε έναν υπέροχο ιστότοπο , αλλά μόλις το δημοσιεύσετε, είναι αφόρητα αργό.





Η ελαχιστοποίηση της javascript είναι ένας τρόπος για να επιταχύνετε τους χρόνους απόκρισης ιστότοπου (μαζί με συμπίεση HTML ), και ευτυχώς για εσάς, είναι μια εύκολη διαδικασία. Σήμερα θα σας δείξω όλα όσα πρέπει να γνωρίζετε.



Τι σημαίνει Minify;

Η διαδικασία του ελαχιστοποίηση (ή ελαχιστοποίηση ) είναι μια απλή έννοια. Όταν γράφετε κώδικα σε JavaScript ή σε οποιαδήποτε άλλη γλώσσα, υπάρχουν πολλές δυνατότητες που απαιτούνται μόνο για να καταστήσουν τον κώδικα ευκολότερο για τους ανθρώπους να κατανοήσουν - στους υπολογιστές δεν νοιάζεται πώς ονομάζετε τις μεταβλητές σας ή πόση απόσταση υπάρχει μεταξύ των παρενθέσεων, για παράδειγμα.





Με την ελαχιστοποίηση του κώδικα, μπορείτε να μειώσετε δραστικά το μέγεθος του αρχείου του. Επομένως, ένα μικρότερο αρχείο θα είναι πιο γρήγορο για λήψη από τους χρήστες σας. Εάν γράφετε μόνο μία ή δύο γραμμές JavaScript, πιθανότατα δεν θα υπάρξει αξιοσημείωτη βελτίωση. Ωστόσο, εάν γράφετε πολύ κώδικα ή χρησιμοποιείτε μεγάλες βιβλιοθήκες όπως το jQuery, οι αισθητές αυξήσεις της απόδοσης και τα δραστικά μειωμένα μεγέθη αρχείων είναι εύκολα εφικτά!

Εάν φορτώσετε κώδικα από εξωτερικό CDN, όπως π.χ. Βιβλιοθήκες που φιλοξενούνται από την Google , έχετε χρησιμοποιήσει ελαχιστοποιημένο κώδικα.



τα παράθυρα δεν μπορούσαν να εντοπίσουν αυτόματα τις ρυθμίσεις διακομιστή μεσολάβησης

Πώς φαίνεται ο ελαχιστοποιημένος κώδικας;

Ας δούμε μερικά παραδείγματα. Είναι δύσκολο να δούμε τον αντίκτυπο της ελαχιστοποίησης σε μικρές βάσεις κώδικα, γι 'αυτό ζητώ συγγνώμη εκ των προτέρων για το μεγάλο μήκος τους.

Ιδού μερικά απεριόριστος JavaScript από τον οδηγό μας για τη χρήση του JSON με Python και 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();
}

Ακολουθεί ο ελαχιστοποιημένος κώδικας:

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()}};

Αυτή η ελαχιστοποιημένη έκδοση του κώδικα είναι 39 τοις εκατό μικρότερος. Σε αυτό το παράδειγμα, τα ονόματα των μεταβλητών παραμένουν τα ίδια, αλλά όλο το κενό διάστημα και τα σχόλια έχουν αφαιρεθεί.



Ακολουθεί ένα άλλο παράδειγμα από τον οδηγό μας στο 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');
});

Ακολουθεί ο ελαχιστοποιημένος κώδικας:

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')});

Αυτή τη φορά υπήρχε μόνο ένα 26 τοις εκατό μείωση - αυτό είναι ακόμα πολύ καλό για ένα τόσο μικρό μπλοκ κώδικα.

Ακολουθεί ένα τελευταίο παράδειγμα από τον οδηγό μας για το Javascript και το 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);

Παρατηρήστε πώς υπάρχουν πολύ των σχολίων και του κενού χώρου. Η ελαχιστοποιημένη έκδοση μείωσε το μέγεθος αρχείου κατά 52 τοις εκατό :

πώς να ελέγξετε για κακόβουλο λογισμικό σε mac
var newHeading=document.createElement('h1'),h1Text=document.createTextNode('Heading Level 1');newHeading.appendChild(h1Text),document.getElementById('bt').appendChild(newHeading);

Ακολουθούν τα μεγέθη ορισμένων κοινών Βιβλιοθηκών JavaScript σε σύγκριση με τις μικρές εκδόσεις τους:

  1. Highcharts: 1 MB> 201 KB
  2. jQuery: 270 KB> 90 KB
  3. MooTools: 164 KB> 93 KB

Μερικές από αυτές τις βιβλιοθήκες παρουσιάζουν σημαντική μείωση μεγέθους όταν συμπιέζονται ( ~ 80 τοις εκατό ), ενώ οι άλλοι δεν είναι τόσο καλοί ( ~ 40 τοις εκατό ). Τούτου λεχθέντος, οποιαδήποτε εξοικονόμηση θα κάνει τον ιστότοπό σας γρηγορότερο για τους χρήστες σας και θα μειώσει την πίεση στον διακομιστή ιστού σας.

Πώς ελαχιστοποιείτε;

Τώρα ξέρετε πώς λειτουργεί και πώς μοιάζει, ας δούμε πώς να το κάνουμε. Μην ανησυχείτε, δεν χρειάζεται να τροποποιήσετε τον κώδικα με μη αυτόματο τρόπο! Υπάρχει μια ποικιλία δωρεάν διαθέσιμων εργαλείων που χειρίζονται τη διαδικασία για εσάς.

Αυτά λειτουργούν με διάφορους τρόπους. Τα περισσότερα διαδικτυακά εργαλεία σάς επιτρέπουν να αντιγράψετε και να επικολλήσετε κώδικα, τον οποίο στη συνέχεια θα επεξεργαστούν και θα σας επιστρέψουν στη σελίδα. Αυτά τα εργαλεία συχνά σας επιτρέπουν να ανεβάζετε πολλά αρχεία επίσης.

Ακολουθεί μια σύντομη ανασκόπηση των διαδικτυακών εργαλείων. Λειτουργούν ως επί το πλείστον το ίδιο, οπότε δεν χρειάζεται να ανησυχείτε πολύ για το ποια θα επιλέξετε.

JSCompress - Εγώ προσωπικά χρησιμοποιώ αυτόν τον ιστότοπο περισσότερο αν είναι απλώς μια γρήγορη δουλειά. Είναι γρήγορο να τρέξει και σας δείχνουν ακόμη και τα εργαλεία που χρησιμοποίησαν για να το φτιάξουν.

Ελαχιστοποιητής JavaScript - Αυτό το εργαλείο λειτουργεί καλά, αλλά πραγματικά λάμπει ως API. Αυτό σας επιτρέπει να δημιουργήσετε τη δική σας ενσωμάτωση ή υπηρεσία πάνω από τον υπάρχοντα ιστότοπό τους.

JavaScript Minifier - Ένας άλλος ιστότοπος με το ίδιο όνομα, αυτό το εργαλείο είναι τόσο απλό όσο έρχεται. Χωρίς επιλογές ή μενού, μόνο ένα κουμπί.

Ελαχιστοποίηση - Αυτός ο ιστότοπος φαίνεται καταπληκτικός και οι προγραμματιστές έχουν δώσει σαφώς προσοχή στις λεπτομέρειες εδώ.

Αυτή η λίστα θα μπορούσε να συνεχιστεί για πάντα. Υπάρχουν τόσα πολλά διαδικτυακά εργαλεία για την ελαχιστοποίηση ιστότοπων που είναι δύσκολο να πάει στραβά.

Εργαλεία ελαχιστοποίησης υπάρχουν επίσης ως εργαλεία γραμμής εντολών ή πρόσθετα για το δικό σας Επεξεργαστής JavaScript Το Αυτά τα εργαλεία είναι συχνά πολύ πιο γρήγορα στη χρήση και «απλώς λειτουργούν» με τον υπάρχοντα κώδικά σας. Δεν χρειάζεται αντιγραφή και επικόλληση και δεν χρειάζεται να εξαγάγετε το JavaScript από HTML ή CSS που ενδέχεται να βρίσκονται στο ίδιο αρχείο.

Εάν χρησιμοποιείτε το Microsoft Visual Studio, το Bundler και Minifier επέκταση από την αγορά έχει πάνω από 600.000 εγκαταστάσεις! Όχι μόνο αυτό, αλλά ενημερώνεται τακτικά και διαθέσιμο στο GitHub Το

Αν είστε φαν του Υπέροχο κείμενο όπως είμαι, τότε το Ελαχιστοποίηση το πακέτο είναι αυτό που θέλετε. Με περισσότερες από 61.000 εγκαταστάσεις, είναι ένα πολύ δημοφιλές πακέτο, και αυτό επίσης διαθέσιμο στο GitHub , εάν επιθυμείτε να συνεισφέρετε σε ένα έργο ανοιχτού κώδικα.

Τέλος, αν είστε PyCharm χρήστης, μπορείς διαμορφώστε το για ενσωμάτωση απευθείας με πολλά κοινά εργαλεία συμπίεσης όπως π.χ. Συμπιεστής YUI Το Πολλά από αυτά τα εργαλεία τροφοδοτούν απευθείας τα διαδικτυακά εργαλεία που αναφέρονται παραπάνω.

Προειδοποιήσεις

Εκεί έχει να είσαι αλιευτικός σωστά; Τίποτα δεν μπορεί ποτέ να είναι τέλειο. Λοιπόν, ναι, υπάρχει ένα πρόβλημα, αλλά είναι αρκετά μικρό και μπορεί εύκολα να αντιμετωπιστεί:

Ο ελαχιστοποιημένος κώδικας δεν μπορεί να αποκατασταθεί στην αρχική του κατάσταση.

Όταν ελαχιστοποιείτε οποιονδήποτε κώδικα, η αρχική του μορφή χάνεται. Πρέπει να κρατήσετε ένα αντίγραφο του εάν θέλετε να έχετε οποιαδήποτε ελπίδα να κάνετε εύκολα σημαντικές αλλαγές - δεν αρκεί να χρησιμοποιείτε τον έλεγχο έκδοσης.

Ενώ είναι δυνατόν να αναιρώ τον κωδικό σας, δεν είναι ποτέ ξανά το ίδιο. Όλα τα πολύτιμα σχόλιά σας χάνονται, για ένα πράγμα.

Αυτό δεν είναι τεράστιο πρόβλημα, αλλά πρέπει να το έχετε κατά νου κατά την κωδικοποίηση. Ως βασικός κανόνας, ασυμπίεστος > ανάπτυξη και συμπιεσμένο > παραγωγή.

Τώρα γνωρίζετε όλα όσα πρέπει να γνωρίζετε για την ελαχιστοποίηση της JavaScript! Η ελαχιστοποίηση του κώδικα είναι ένας από τους τρόπους για να μειώσετε την απόδοση από έναν διακομιστή και όλοι οι μεγάλοι ιστότοποι το κάνουν.

Ποια εργαλεία χρησιμοποιείτε για να ελαχιστοποιήσετε τον κωδικό σας; Κανείς καν στον κόπο; Ενημερώστε μας στα σχόλια παρακάτω!

πώς να φτιάξετε τη δική σας κεραία

Πίστωση εικόνας: NavinTar μέσω Shutterstock

Μερίδιο Μερίδιο Τιτίβισμα ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ Διαγράψτε αυτά τα αρχεία και τους φακέλους των Windows για να ελευθερώσετε χώρο στο δίσκο

Χρειάζεστε εκκαθάριση του χώρου στο δίσκο στον υπολογιστή σας Windows; Ακολουθούν τα αρχεία και οι φάκελοι των Windows που μπορούν να διαγραφούν με ασφάλεια για να ελευθερωθεί χώρος στο δίσκο.

Διαβάστε Επόμενο Σχετικά θέματα
  • Προγραμματισμός
  • JavaScript
  • Ιάβα
  • Σχεδιασμός Ιστού
Σχετικά με τον Συγγραφέα Τζο Κόμπερν(Δημοσιεύθηκαν 136 άρθρα)

Ο Joe είναι απόφοιτος της Επιστήμης των Υπολογιστών από το Πανεπιστήμιο του Lincoln, Ηνωμένο Βασίλειο. Είναι επαγγελματίας προγραμματιστής λογισμικού και όταν δεν πετάει με drones ή δεν γράφει μουσική, μπορεί συχνά να βρεθεί να βγάζει φωτογραφίες ή να παράγει βίντεο.

Περισσότερα από τον Joe Coburn

Εγγραφείτε στο newsletter μας

Εγγραφείτε στο ενημερωτικό μας δελτίο για τεχνικές συμβουλές, κριτικές, δωρεάν ebooks και αποκλειστικές προσφορές!

Κάντε κλικ εδώ για εγγραφή