Question

我正在开发AngularJS应用程序。我通过附加＆＃34;随机＆＃34;来为HTML视图应用缓存清除。 URL查询字符串的值。如何实现脚本文件和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']
      }
    }

您可以使用自动生成器为您执行此操作。 angularjs yeoman generator已经为您完成了所有这些工作。如果您不想使用自耕农或此生成器，至少可以复制他们的解决方案。

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

用于脚本和CSS的AngularJS Cache Busting

1 个答案: