Lot of times, we face the issue when we make changes into the JS, CSS and Image files and these changes do not reflect on the website. Many times client also complained to not to able to see the new changes. You know this happens due to caching.
Example
Suppose that we made some changes into the js, css and images files but we are not able to see the new changes because browser using cached js, css and image files. Sometimes we open the browser in incognito mode/private mode for looking the changes and sometimes we cleared the cache from the browsers then we able to see the new changes.
How to fix this issue?
We can solve this issue after versioning JavaScript and CSS files. There are 2 ways manually and automatic. Let’s explore manually way to versioning JS and CSS files.
Manually
Method 2: Dynamically
I have created a method that returns string and do versioning automatically. In this method, I have used filemtime function to get the modification time. Follow the below code:
Add above method into all JavaScript, CSS and Images files where-ever in the page. Follow the below code:
Likewise, we can do versioning into the CSS and Image files using the same method.
" type="text/css">
" type="text/css">
Test the code
Using inspect element or using page view source we can see the output.
Using the above methods, the cache issue will be fixed, and you not need to clear the cache and not need to open incognito mode to see the changes. Using above methods, browser will not use cached files when ther are any changes.
Thanks for reading, feel free to reach out to me for any comments and suggestions. I hope you found this article helpful.
