Mình đang làm 1 web site PHP, nhưng có 1 vấn đề là file javascript của mình trong 1 thời gian không chỉnh sửa thì mình chỉnh sửa thì nó sẻ không có tác dụng. Chỉ có 1 cách là đổi tên file đó và sửa lại link script thì file sau khi chỉnh sửa mới có tác dụng. Tương tự với file CSS. Không biết có bạn nào từng gặp tình trạng giống mình không, cảm ơn!!!
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
2 Likes
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.
Để 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ở:
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="/script.js?<?php echo time(); ?>"></script>
Khi chạy nó sẽ render thành:
<script type="text/javascript" src="/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.
5 Likes
Mình cảm ơn nha…
83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?