CODEWITHSUNDEEP
angularjscaching
Rajaram
Rajaram

Reputation: 11

AngularJS Cache Busting for Scripts and CSS

I am developing AngularJS application. I applied cache busting for HTML views by appending a "random" value to the URL query string. How can implement cache busting for Script files and CSS? Please let me the best practice for cache busting in AngularJS application.

Upvotes: 1

Views: 5740

Answers (1)

pcatre
pcatre

Reputation: 1724

So you implement cache busting when you build the project by putting a hash based on the file's contents in the names of the static files you have and then updating the references to those values (example: you change the name of an image adding the hash value and then you need to update the name in the places where references to that image appear which - for images - would usually be css and/or html files).

What you could use are the following plugins: grunt-filerev (or grunt-rev) and grunt-usemin

You should use the filerev task together with yeoman/grunt-usemin for cache busting of static files in your app. This allows them to be cached forever by the browser.

So grunt-filerev renames the files for cache busting and grunt-usemin replaces references to non-optimized scripts or stylesheets into a set of HTML files (or any templates/views).

Example usage of this plugins from yeoman's angularjs generator Gruntfile.js:

    // Renames files for browser caching purposes
    filerev: {
      dist: {
        src: [
          '<%= yeoman.dist %>/scripts/{,*/}*.js',
          '<%= yeoman.dist %>/styles/{,*/}*.css',
          '<%= yeoman.dist %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',
          '<%= yeoman.dist %>/styles/fonts/*'
        ]
      }
    },

    // Reads HTML for usemin blocks to enable smart builds that automatically
    // concat, minify and revision files. Creates configurations in memory so
    // additional tasks can operate on them
    useminPrepare: {
      html: '<%= yeoman.app %>/index.html',
      options: {
        dest: '<%= yeoman.dist %>',
        flow: {
          html: {
            steps: {
              js: ['concat', 'uglifyjs'],
              css: ['cssmin']
            },
            post: {}
          }
        }
      }
    },

    // Performs rewrites based on filerev and the useminPrepare configuration
    usemin: {
      html: ['<%= yeoman.dist %>/{,*/}*.html'],
      css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
      options: {
        assetsDirs: ['<%= yeoman.dist %>','<%= yeoman.dist %>/images']
      }
    }

You can use a yeoman generator to do this for you. The angularjs yeoman generator already does all of this for you. At the very least you can copy their solution for this problem if you don't want to use yeoman or this generator.

Note: the yeoman angularjs generator used to use the plugin grunt-rev but they later replaced that with grunt-filerev.

Upvotes: 5

Related Questions