File javascript không hoạt động sau 1 thời gian trong 1 project php

Nguyên nhân Browser cache lại file --> chỉnh sửa file thì browser vẫn sử dụng file đã được cache để render view.
Giải quyết:

• Bật Developer tool (F12 - Chrome), vào network, click vào mục disable cache nhé.
• Ko muốn disable cache thì dùng gulp để thêm hash vào filename, chỉnh sửa file là filename sẽ tự động thay đổi

Vấn đề này là do trình duyệt đã cache lại các file JS, CSS của bạn.
Bạn có thể mở Dev Tools (F12, tab network) rồi F5 lại sẽ biết được file nào được lấy từ cache.
Lợi ích của việc caching chắc bạn cũng biết, giúp load trang nhanh hơn, không phải tốn thời gian request lên server. Đây cũng là 1 trong những lý do nên viết JS, CSS ra file riêng biệt, để tận dụng browser cache.

image.png1129x270 68.4 KB

Để xóa cache, đơn giản bạn chỉ cần nhấn CTRL+F5 thay vì F5 hay enter lại url, cách này hoạt động hầu hết các trình duyệt.

Hoặc đối với Chrome, Firefox, Opera… có tùy chọn để tắt cache khi dev tool đang được mở:

image.png742x128 17.6 KB

Ngoài ra, bạn cũng để ý thấy, khi đổi tên file thì sẽ không bị cache nữa. Chỉ cần 1 thay đổi nhỏ trong đường dẫn url là browser sẽ xem đó là 1 file mới và sẽ request lên server thay vì load từ cache.
Vì thế có 1 cách khác là bạn thay đổi url dựa vào query string.
Ví dụ trong quá trình phát triển, bạn có thể thêm timestamp vào query string để disable cache:

<script type="text/javascript" src="https://daynhauhoc.com/script.js?<?php echo time(); ?>"></script>

Khi chạy nó sẽ render thành:

<script type="text/javascript" src="https://daynhauhoc.com/script.js?1234567890"></script>

Mỗi lần bạn F5 trình duyệt, đường dẫn sẽ thay đổi, do đó file đó sẽ không bị cache nữa.

Tuy nhiên, cách này không khuyến nghị trong môi trường production, vì nó disable hoàn toàn cache. Thay vào đó người ta sẽ tạo ra các version, chẳng hạn script.js?version=1.2.3 hay script.123abc.js, việc này có thể thực hiện tự động bằng các công cụ (webpack, gulp, grunt…), một số PHP framework (Symfony, Laravel,…) cũng tích hợp sẵn chức năng này, bạn tìm hiểu về Assets Versioning để biết thêm.

Mình cảm ơn nha…