发布新版本的 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

当您使用 gulp 时，您可以使用gulp-angular-templateCachegulp 插件来收集所有 html 文件，将它们连接到单个 javascript 文件中，并$templateCache根据文件路径将它们添加到 AngularJS' 中。

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 文件都是使用单个调用检索的。

另一种方法可能是将缓存破坏器添加到您的 html 文件中，并更新该文件的所有用法以包含缓存破坏器的哈希值。但我不太喜欢这种方法。

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