Vấn đề bộ nhớ đệm trong trình duyệt

Trình duyệt lưu vào bộ nhớ đệm (cache) các tệp CSS, JavaScript và hình ảnh được liên kết. Lưu vào bộ nhớ đệm có nghĩa là các tệp được liên kết chỉ được trình duyệt tải xuống trong lần đầu tiên người dùng truy cập trang web. Ở những lần truy cập sau, các tệp này sẽ không được tải xuống lại nữa, mà sẽ được lấy ra từ bộ nhớ đệm (cache) của trình duyệt.

Lưu vào bộ nhớ đệm là hữu ích. Nó được tạo ra để nâng cao tốc độ tải trang web. Bởi vì việc trình duyệt lấy tệp từ kho lưu trữ của nó sẽ nhanh hơn là tải xuống tệp đó từ internet mỗi lần.

Tuy nhiên, đổi lại tốc độ là sự bất tiện khi phát triển. Vấn đề là, nếu bạn thay đổi điều gì đó trong mã của mình và sau đó đăng tải các thay đổi lên máy chủ - tất cả người dùng đã truy cập trang web của bạn sẽ có một bản sao mã cũ được lưu trong bộ nhớ đệm.

Giải pháp đầu tiên cho vấn đề

Để giải quyết hành vi này, cần phải mỗi lần đổi tên các tệp đã được sửa đổi. Trong thực tế điều này không thuận tiện, do đó một mẹo thông minh được sử dụng. Bản chất của nó là, khi liên kết tệp, sau tên tệp chúng ta đặt dấu hỏi, dấu bằng và số phiên bản của tập lệnh của bạn. Cấu trúc như vậy được gọi là tham số GET.

Việc có tham số GET trong tên tệp "không làm hỏng" đường dẫn từ góc nhìn của máy chủ, vẫn chỉ vào cùng một tệp. Nhưng từ góc nhìn của trình duyệt, việc thay đổi tham số GET buộc trình duyệt coi đường dẫn đến tệp đã thay đổi và tải xuống tệp lại từ đầu.

Để chống lại bộ nhớ đệm, khi bạn đưa ra các thay đổi trong tệp mã của mình, bạn sẽ cần tăng giá trị của tham số GET lên một đơn vị. Hãy xem ví dụ áp dụng cách tiếp cận tương tự:

<!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>

Giải pháp thứ hai cho vấn đề

Cũng tồn tại một cách tiếp cận tiên tiến hơn. Nó nằm ở việc thêm các chuỗi ngẫu nhiên vào tên tệp, ví dụ, như thế này:

<!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>

Các chuỗi này được gọi là hash. Hash đại diện cho một chuỗi duy nhất. Nó được tính toán từ nội dung của tệp bằng một cách đặc biệt. Điều này có nghĩa là mỗi văn bản tương ứng với một hash duy nhất của nó. Nếu văn bản của tệp bị thay đổi, thì hash của nó cũng sẽ khác đi và chúng ta sẽ cần phải thay đổi nó trong tên tệp.

Tất nhiên, việc tự tính toán hash và đổi tên tệp là một công việc không mấy thú vị. Do đó, cách tiếp cận này chỉ được sử dụng trong trường hợp chúng ta có một công cụ nào đó cho phép tự động tính toán hash và đổi tên tệp, cũng như thay đổi tên tệp thành tên mới trong các tệp HTML. Webpack cho phép làm tất cả những điều này. Chúng ta sẽ học điều này xuyên suốt toàn bộ giáo trình.