发布新版本的 SPA 时如何重新加载模板 (html)？

Question

我目前在发布新版本的 SPA 时遇到了麻烦，因为浏览器正在缓存 html 模板。

我的 SPA 使用 Angular 1.5、ocLazyload 和 ui-router。 我已经将 gulp 任务配置为使用缓存破坏技术（使用gulp-rev ），并且它运行得非常好，至少在脚本和 css 文件中是这样。 但是，当我们对 html 文件进行更改时，浏览器会不断加载旧版本。 有时，即使使用 Ctrl+F5 刷新页面也无法解决问题，并且一直显示旧版本的 html。

此外，将浏览器配置为不缓存 html 文件是不可取的（特别是对于移动设备），因为 html 更改可能不会经常发生。

有没有什么好的解决方案可以解决这个问题，只有在有新版本的时候才获取 html 文件？

提前致谢！

Answer 1

我在我参与的一个项目中遇到了这个问题。 我试过这些方法。

方法一：设置不同状态的缓存属性false。

var core = angular.module('app.core');
core.cofigure(configure);

configure.$inject = ['$stateProvider'];

// Configuration Function
function configure($stateProvider){

    $stateProvider
          .state('login', {
            url: '/login/:redirect/:viewId',
            cache: false, // Here i have set the cache property to false
            templateUrl: 'app/layout/login.html' 
          })
          .state('home', {
            url: "/home",
            cache: false, // Here also
            abstract: true,
            templateUrl: 'app/layout/container.html'
          });
}

现在这个方法很好，但它在随机时间和 Internet Explorer 中不起作用。

方法 2：向模板 URL 添加时间戳。

 // I created a timestamp string with the current time.
 var date = new Date().getTime().toString();

 $stateProvider
          .state('login', {
            url: '/login/:redirect/:viewId',
            cache: false, 
            // Now i append it here
            templateUrl: 'app/layout/login.html' +'?' + date 
          })
          .state('home', {
            url: "/home",
            cache: false, 
            abstract: true,
            templateUrl: 'app/layout/container.html' + '?' + date // Here also.
          });

这种方法是我们在搜索此问题的可能修复方法后决定的。 然而，在这种情况下不会发生缓存。 模板文件的每个 GET 请求都是不同的，它将保证加载的模板将是更新的模板。 但是，如果您正在构建具有大量模板且客户端性能至关重要的 Web 应用程序，则此方法将无济于事。

方法 3：需要模板

我推荐这种方法。 您可以在应用程序中使用require.js来在 javascript 执行时加载模板。 这将在为开发目的运行应用程序时以及在您为生产而缩小代码时加载模板。 由于模板已加载到 javascript 代码中，因此在部署到生产环境时也不必保留 html 模板文件。

$stateProvider
          .state('login', {
            url: '/login/:redirect/:viewId',
            // Note 'template' and not 'templateUrl'
            template: require('app/layout/login.html')
          })
          .state('home', {
            url: "/home",
            abstract: true,
            template: require('app/layout/container.html')
          });

Answer 2

当您使用 gulp 时，您可以使用gulp-angular-templateCache ，它是一个 gulp 插件，用于收集所有 html 文件，将它们连接到一个 javascript 文件中，然后根据文件路径将它们添加到 AngularJS 的$templateCache 。

gulp.task('default', function () {
    return gulp.src('app/**/*.html')
        .pipe(templateCache({
            module: 'yourModuleName'
        }))
        .pipe(gulp.dest('dist'));
});

生成的 JavaScript 文件包含如下内容：

angular.module('yourModuleName').run([$templateCache,
    function($templateCache) {
        $templateCache.put('app/path/to/some-template.html",
            // some-template.html content comes here (escaped)
        );
    }
]);

您现在可以将此文件添加到您的包中，对 html 文件的任何更改都将更新您的包的内容，从而导致更新的缓存破坏者。

但是如果你不想更新整个包，你可以将它们分开并确保文件在你的包之后被加载。

注意：一旦其中一个发生更改，上述两种方法都会破坏所有 html 文件的缓存，但是所有这些 html 文件都是使用单个调用检索的。

另一种方法是将缓存破坏者添加到您的 html 文件并更新该文件的所有用法以包括缓存破坏者的哈希。 但我并不是很喜欢这种方法。

编辑：第一种方法是我在基于 gulp 的项目中使用的方法。 但是，最近我将 AngularJS 与 Webpack 一起使用（请参阅我的入门），并且我使用的方法与 Midhun Darvin 的第 3 种方法（请参阅此处）相当，但我使用的不是requirejs ，而是webpack 。 但是，请记住，这种方法（使用requirejs或webpack ）会导致将 html 文件添加到包含 angularjs 代码的 javascript 文件中。 这意味着对 javascript 文件的任何更改都将停止所有 html 文件的缓存，因为缓存破坏者将被更新。

Answer 3

我推荐一种类似于@Midhun Darvin 的选项 2 的方法（所以我使用他们的代码作为基础）。 不要使用日期，而是使用版本号。 每次发布时，您只需要记住更新版本号，所有 html 文件的缓存都会被破坏。

 // update this with every release
 var version = 0.1.0;
 // make make this easier so you don't have to add query strings to all your template calls
 var v = "?v=" + version;

 $stateProvider
     .state('login', {
         url: '/login/:redirect/:viewId',
         cache: false, 
         templateUrl: 'app/layout/login.html' + v // version added to bust cache
     })
     .state('home', {
         url: "/home",
         cache: false, 
         abstract: true,
         templateUrl: 'app/layout/container.html' + v // version added to bust cache
     });