Tự động xóa bộ nhớ cache trong bản dựng React

Bạn đã phải biết rằng trong trình duyệt tồn tại vấn đề bộ nhớ cache tĩnh. Bản chất của vấn đề là để tăng tốc độ, trình duyệt lưu vào bộ nhớ cache các tệp kiểu, tập lệnh và hình ảnh.

Điều này có nghĩa là nếu trên máy chủ lưu trữ bạn thay đổi một cái gì đó trong tập lệnh hoặc kiểu của bạn, thì những thay đổi sẽ chỉ xuất hiện đối với những khách truy cập mới vào trang web. Những khách truy cập cũ, những người đã từng truy cập trang web trước đó, sẽ thấy phiên bản mã đã được lưu trong bộ nhớ cache. Điều này, tất nhiên, là không thể chấp nhận được.

May mắn thay, trong React vấn đề này được giải quyết một cách tự động. Giải pháp của nó nằm ở chỗ, các tệp bản dựng, ngoài tên và phần mở rộng, có một chuỗi ngẫu nhiên, được gọi là hash. Hash này tương ứng với nội dung của tệp. Điều này có nghĩa là khi thay đổi mã trong tệp, hash trong tên của nó cũng sẽ thay đổi. Do đó, trình duyệt sẽ nghĩ rằng đây là một tệp mới và sẽ tải nó về.

Chúng ta có thể quan sát hash của các tệp khi chúng được kết nối trong index.html: