Versioning JavaScript, CSS and Image Files

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

<script src="/js/main.js?v=1620969487" type="text/javascript"></script>
<script src="/js/custom.js?v=1620969502" type="text/javascript"></script>
<script src="/js/profile.js?v=1620969514 " type="text/javascript"></script>

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:

<?php 

  /**
     * @param $file
     * @return string
  */

function file_versioning($file) {

    // Check file path and return file if path is not correct
    if (strpos($file, '/') !== 0 || !file_exists($_SERVER['DOCUMENT_ROOT'] . $file)) return $file;

    // Get the file modification time
    $get_time = filemtime($_SERVER['DOCUMENT_ROOT'] . $file);

    // Return filename with query string
    return sprintf("%s?v=%d", $file, $get_time);
}

?>

Add above method into all JavaScript, CSS and Images files where-ever in the page. Follow the below code:

<script src="<?php echo file_versioning('/js/main.js?v=1620969487'); ?>" type="text/javascript"></script>
<script src="<?php echo file_versioning('/js/custom.js?v=1620969502'); ?>" type="text/javascript"></script>
<script src="<?php echo file_versioning('/js/profile.js?v=1620969514'); ?>" type="text/javascript"></script>

Likewise, we can do versioning into the CSS and Image files using the same method.

<link rel="stylesheet" href ="<?php echo file_versioning('/css/style.css?v=1620969487'); ?>" type="text/css">
<link rel="stylesheet" href =<?php echo file_versioning('/css/custom.css?v=1620969502'); ?>" type="text/css">
<link rel="stylesheet" href =<?php echo file_versioning('/css/main.css?v=1620969514'); ?>" 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.