AnglerJS Cache Busting для скриптов и CSS

Question

Я разрабатываю приложение AngularJS. Я применил кэширование для просмотров HTML, добавив «случайное» значение в строку запроса URL. Как реализовать кэширование для файлов сценариев и CSS? Пожалуйста, дайте мне наилучшую практику для перебора кеша в приложении AngularJS.

Answer 1

Таким образом, вы реализуете переполнение кэша при создании проекта, помещая хэш на основе содержимого файла в именах статических файлов, которые у вас есть, а затем обновляете ссылки на эти значения (например: вы меняете имя изображения добавляя значение хэша, а затем вам нужно обновить имя в тех местах, где появляются ссылки на это изображение, которые для изображений - обычно являются css и/или html-файлами).

Что вы можете использовать следующие модули: grunt-filerev (или grunt-rev) и grunt-usemin

Вы должны использовать задачу filerev вместе с YEOMAN/хрюкать-usemin для очистки кэша статических файлов в вашем приложении. Это позволяет им всегда кэшироваться браузером.

Так grunt-filerev переименовывает файлы для перебора кеша и grunt-usemin заменяет ссылки на неоптимизированные сценарии или таблицы стилей в набор файлов HTML (или любых шаблонов/представлений).

Пример использования этого плагинов от angularjs генератор Gruntfile.js YEOMAN по:

// 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 generator уже делает все это для вас. По крайней мере, вы можете скопировать их решение для этой проблемы, если вы не хотите использовать йоман или этот генератор.

Примечание: генератор yoman angularjs использовался для использования плагина grunt-rev, но позже он заменил его на grunt-filerev.