发布新版本的SPA时如何重新加载模板（html）？ [英] How to reload templates (html) when releasing a new version of a SPA?

问题描述

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

I'm currently running into trouble when releasing new versions of my SPA since the html templates are being cached by the browser.

我的SPA使用Angular 1.5，ocLazyload和ui路由器。我已将gulp任务配置为使用缓存清除技术（具有 gulp-rev ），而且至少在脚本和css文件中运行良好。但是，当我们对html文件进行更改时，浏览器会继续加载旧版本。有时甚至使用Ctrl + F5刷新页面也不能解决问题，并且会继续显示html的旧版本。

My SPA uses Angular 1.5, ocLazyload and ui-router. I have configured gulp tasks to use cache-busting technique (with gulp-rev), and it is working pretty well, at least with the script and css files. However, when we have changes on html files the browser keeps loading the old version. Sometimes even refreshing the page with Ctrl+F5 doesn't solve the problem and it keeps showing the old version of html.

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

In addition, configuring the browser to not make cache of html files isn't desirable (specially for mobile), since html changes may occur not very often.

是否有解决此问题的好方法来解决html文件的问题

Is there any good solution that address this problem for fetching html files only when there is new versions of it?

预先感谢！

推荐答案

在使用gulp时，您可以使用 gulp- angular-templateCache ，这是一个gulp插件，用于收集您的所有html文件，将它们连接成一个javascript文件，并将它们添加到AngularJS' $ templateCache 基于文件路径。

As you are using gulp, you could make use of gulp-angular-templateCache, which is a gulp plugin to collect all your html files, concatenate them into a single javascript file and add them to AngularJS' $templateCache based on the file path.

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

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

The resulting JavaScript file contains something like:

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

您现在可以将此文件添加到包中，对html文件所做的任何更改都会更新包中的内容，因此导致

You could now add this file to your bundle, any changes to your html file will update the content of your bundle hence result in an updated cache buster.

但是如果您不希望整个捆绑软件都被更新，可以将它们分开，并确保在捆绑软件之后加载文件。

But if you do not want the entire bundle to be updated, you could keep them seperated and ensure the file get's loaded after your bundle.

注意：以上两种方法都确实会中断所有html文件的缓存，但是所有这些html文件都可以通过一次调用来检索。

Note: both of the above approaches do break the cache for all html files once one of them has changed, but all of those html files are retrieved using a single call.

另一种方法可能是向您的html文件和u添加缓存破坏符请对该文件的所有用法进行更新，以包括缓存破坏者的哈希值。但是我并不真的喜欢这种方法。

An alternative approach could be to add cache busters to your html files and update all the usages of that file to include the cache buster's hash. But I'm not really a fan of this approach.

编辑：第一种方法是我在基于gulp的项目中使用的方法。但是，这些天我将AngularJS与Webpack一起使用（请参阅我的启动器），我正在使用与Midhun Darvin的第三种方法类似的方法（请参见此处），但我使用的不是 requirejs webpack 。但是，请记住，这种方法（使用 requirejs 或 webpack ）会导致将html文件添加到包含您的angularjs代码的javascript文件。这意味着对javascript文件所做的任何更改都会使所有html文件的缓存失效，因为缓存破坏程序将被更新。

The first approach is the one I use in my gulp-based projects. However, these days I'm using AngularJS with Webpack (See my starter) and I'm using an approach comparable to Midhun Darvin's 3th method (see here), but instead of requirejs I'm making use of webpack. However, keep in mind that this approach (using either requirejs or webpack) will result in the html files being added to the javascript file containing your angularjs code. This means any change to a javascript file will brake the cache for all your html files as the cache buster will be updated.

这篇关于发布新版本的SPA时如何重新加载模板（html）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！