javascript - 如何在版本更改时重新加载资源(HTML/CSS/JS)

Question

我有一个使用 AngularJS、oclazyload、ui-router、bootstrap 等的 Web 应用程序，将来会有更新，我需要确保浏览器不会继续显示缓存的资源，即使有更新版本可用。

为此，我配置了 Gruntfile(使用 grunt-replace、grunt-prompt 和 grunt-bump)，以便在每次创建新版本时将版本号附加到 index.html 中的每个 URL。

这工作正常，但由于我使用 ui-router 和 oclazyload，我有很多资源延迟加载且仅按需加载，因此我尝试实现一个 Angular Http 拦截器以将版本号附加到每个 XHR URL。然而，这会弄乱模板脚本(例如 <script type="text/ng-template" id="menu-item.html"></script> )。我确实添加了条件来避免这种情况，但感觉很hacky并且容易出错。

在 Angular、vanilla JS、Grunt 或任何其他方式中是否有任何万无一失的解决方案/最佳实践？

提前致谢!

Answer 1

您可以在没有缓存的情况下延迟加载资源:只需将缓存参数设置为false即可。

您还可以设置数组或单个文件的缓存属性。

There are two ways to define config options for the load function. You can use a second optional parameter that will define configs for all the modules that you will load, or you can define optional parameters to each module. For example, these are equivalent (except that the first two files won't be cached in the first example):

$ocLazyLoad.load([{
  files: ['testModule.js', 'bower_components/bootstrap/dist/js/bootstrap.js'],
  cache: false
},{
  files: ['anotherModule.js'],
  cache: true
}]);

和

$ocLazyLoad.load(
  ['testModule.js', 'bower_components/bootstrap/dist/js/bootstrap.js', 'anotherModule.js'],
  {cache: false}
);