Fat Buddha Designs

Affordable, Creative, Hand-Crafted Websites

Cache Busting Css and Js files

Cache busting Css and Js files


Reading Time: (approx) 1 min

Tags that this post has been filed under.

The main content about Cache Busting Css and Js files

Cache busting solves the browser caching issue by using a unique file version identifier to tell the browser that a new version of the file is available. Therefore the browser doesn’t retrieve the old file from cache but rather makes a request to the origin server for the new file.

To implement cache-busting with the static website boilerplate the method I use is relatively simple, it involves a handlebars helper which on file builds timestamps the name of the CSS and js calls in the head and footer of each page.

The handlebars helper is as follows and is included in the gulpfile.js with the boilerplate, it’s the first helper in the list and creates a time/date stamp:-

Extract of gulpfile.js

// templates
gulp.task('templates', (done) => {
        layouts: config.templates.layouts,files
        views: config.templates.src,
        materials: config.templates.partials,
        data: config.templates.data,
        keys: {
          views: 'templates',
          materials: 'components',
        dest: config.templates.dest,
        logErrors: config.dev,
        helpers: {
          // head <link rel="stylesheet" href="/assets/styles/main.css?v=">
          release: function release() {
            return new Date().getTime();

This time/date stamp is then included in the CSS/JS calls as follows:-

Extract of head

<!-- css -->
    <link rel="stylesheet" href="/assets/styles/main.css?v=" media="screen">
    <link rel="stylesheet" href="/assets/styles/print.css?v=" media="print">

    <script src="/assets/scripts/main.js?v=" async="" defer=""></script>

This results in a unique CSS/JS call every time any changes are made:-

Extract of head

<link rel="stylesheet" href="/assets/styles/main.css?v=1535057792788" media="screen">
<link rel="stylesheet" href="/assets/styles/print.css?v=1535057792788" media="print">

<script src="/assets/scripts/main.js?v=1535057792788" async="" defer=""></script>

This at the moment adds a query string timestamp, which is not ideal as there can be issues with certain proxies and cdn’s ignoring the query string, in time I will look for an alternative and then amend this post.

Journal Index

Previous Article: SCSS includes for Grid Layout

Next Article: Static Website Source Files