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

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

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

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

只有在有新版本的html文件时才能获取html文件，有没有解决这个问题的好办法

---

提前谢谢

当您使用gulp时，您可以利用，这是一个gulp插件来收集所有html文件，将它们连接到一个javascript文件中，并根据文件路径将它们添加到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文件的任何更改都将更新捆绑包的内容，从而生成更新的缓存buster

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

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

另一种方法是将缓存buster添加到html文件中，并更新该文件的所有用法，以包括缓存buster的哈希。但我并不真正喜欢这种方法

---

编辑：第一种方法是我在基于吞咽的项目中使用的方法。然而，最近我在Webpack中使用AngularJS（参见我的），我使用的方法与Midhun Darvin的第三种方法（参见）相当，但我使用的不是

requirejs

，而是

Webpack

。但是，请记住，这种方法（使用

requirejs

或

webpack

）将导致html文件添加到包含angularjs代码的javascript文件中。这意味着对javascript文件的任何更改都会在缓存buster更新时停止所有html文件的缓存。

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

方法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'
          });
}

 // 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.
          });

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

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

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'
          });
}

 // 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：需要模板

我推荐这种方法。当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')
          });

---

我推荐一种类似于@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
     });

---

这就是为什么您不喜欢将缓存buster添加到html文件的原因吗？因为我使用了这个解决方案，而且我已经在使用其他文件，所以实现起来非常简单。这种方法有什么缺点我应该注意吗？我不喜欢我的组件和指令html，因为这需要你更新你的源文件URL，我不想走这条路。我同意你的担心，尽管目前我的gulp任务已经更新了源URL。但我将回顾一下，并尝试使用require方法，这对我来说似乎是一个很好的解决方案。你可以看看我在回答中链接的初学者。我经常在官方支持频道（）上用它来解释一个现代的设置。如果你需要关于我的初学者的帮助，请随时打电话给我。