Το πρόβλημα της cache στα προγράμματα πλοήγησης

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

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

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

Η πρώτη λύση του προβλήματος

Για να αντιμετωπιστεί αυτή η συμπεριφορά, πρέπει κάθε φορά να μετονομάζετε τα τροποποιημένα αρχεία. Στην πράξη, αυτό δεν είναι βολικό, επομένως χρησιμοποιείται ένα έξυπνο τέχνασμα. Η ουσία του είναι ότι κατά τη σύνδεση ενός αρχείου, μετά το όνομα του αρχείου βάζουμε ένα ερωτηματικό, το σύμβολο ίσον και τον αριθμό έκδοσης του script σας. Μια τέτοια κατασκευή ονομάζεται παράμετρος GET.

Η παρουσία μιας παραμέτρου GET στο όνομα του αρχείου "δεν χαλάει" τη διαδρομή από την άποψη του διακομιστή, δείχνοντας ακόμα στο ίδιο αρχείο. Αλλά από την άποψη του προγράμματος πλοήγησης, η αλλαγή της παραμέτρου GET αναγκάζει το πρόγραμμα πλοήγησης να θεωρήσει ότι η διαδρομή προς το αρχείο έχει αλλάξει και να κατεβάσει το αρχείο ξανά.

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="styles.css?v=1">
		<script src="script.js?v=1"></script>
	</head>
	<body>
		
	</body>
</html>

Η δεύτερη λύση του προβλήματος

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="styles.398db7afe3b52e94bb25.css">
		<script src="script.1d12c304c284a752cb9a.js"></script>
	</head>
	<body>
		
	</body>
</html>

Αυτές οι συμβολοσειρές ονομάζονται hashes. Ένα hash αντιπροσωπεύει μια μοναδική συμβολοσειρά. Υπολογίζεται από το περιεχόμενο του αρχείου με έναν ειδικό τρόπο. Αυτό σημαίνει ότι σε κάθε κείμενο αντιστοιχεί το δικό του μοναδικό hash. Εάν το κείμενο του αρχείου άλλαξε, τότε και το hash θα είναι διαφορετικό και θα χρειαστεί να το αλλάξουμε στο όνομα του αρχείου.

Φυσικά, ο χειροκίνητος υπολογισμός hashes και η μετονομασία αρχείων είναι μια δυσάρεστη δραστηριότητα. Επομένως, αυτή η προσέγγιση χρησιμοποιείται μόνο στην περίπτωση που έχουμε κάποιο εργαλείο που επιτρέπει τον αυτόματο υπολογισμό hashes και τη μετονομασία αρχείων, καθώς και την αλλαγή των ονομάτων αρχείων σε νέα στα αρχεία HTML. Όλα αυτά μπορεί να τα κάνει το Webpack. Σε αυτό θα μάθουμε καθ' όλη τη διάρκεια ολόκληρου του σεμιναρίου.