AngularJS缓存Busting for Scripts和CSS

Question

我正在开发AngularJS应用程序.我通过在URL查询字符串中附加"随机"值来为HTML视图应用缓存清除.如何实现脚本文件和CSS的缓存清除？请告诉我AngularJS应用程序中缓存清除的最佳实践.

Answer 1

因此,在构建项目时通过在您拥有的静态文件的名称中放置基于文件内容的哈希值来实现缓存清除,然后更新对这些值的引用(例如:您更改添加哈希值的图像的名称然后你需要在那些引用该图像的地方更新名称 - 对于图像 - 通常是css和/或html文件).

您可以使用的是以下插件: grunt-filerev(或grunt-rev)和grunt-usemin

您应该将filerev任务与yeoman/grunt-usemin一起用于应用程序中静态文件的缓存清除.这允许它们被浏览器永久缓存.

因此,grunt-filerev重命名文件以进行缓存清除,grunt-usemin将对非优化脚本或样式表的引用替换为一组HTML文件(或任何模板/视图).

yeoman的angularjs生成器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']
      }
    } 

您可以使用yeoman生成器为您执行此操作.该angularjs自耕农发电机已经做了这一切为您服务.如果您不想使用自耕农或此生成器,至少可以复制他们的解决方案.

注意:yeoman angularjs生成器曾经使用插件grunt-rev,但后来用grunt-filerev替换了它.