gulp build 上的 Angular 6 模板缓存问题（用于 html 文件）答案

【问题标题】：Angular 6 template cache problem (for html files) on gulp buildgulp build 上的 Angular 6 模板缓存问题（用于 html 文件）
【发布时间】：2019-01-01 13:45:39
【问题描述】：

我们有 html 文件的模板缓存问题，我们想在不删除缓存数据的情况下解决它（如果我们删除它，我们会看到性能问题）。你有什么建议吗？

【问题讨论】：

你的意思是部署应用后？
是的，我们使用纱线，gulp。在部署应用程序之前，我们使用 ng build --prod 插件。它为资源创建一个哈希文件。并且应该强制浏览器加载新的最小化资源文件。但是我们面临模板缓存问题，我们必须删除浏览器缓存才能正常运行。这对我们的用户来说确实是个大问题，您能给我一些建议吗？我还能做什么？

标签： angular gulp angular-templatecache

【解决方案1】：

您的问题的一个很好的解决方案称为文件修订或散列，这种方法的概念是：

只需重命名我们的应用提供的每个 html/js/img 文件在文件扩展名之前连接一个随机哈希

有很多可能的方法来做到这一点。一个好方法是这 3 个步骤：

第 1 步。创建 revision:rename gulp 任务

    gulp.task(“revision:rename”, [“compile”], () =>
      gulp.src(["dist/**/*.html",
                "dist/**/*.css",
                "dist/**/*.js",
                "dist/**/*.{jpg,png,jpeg,gif,svg}"])
      .pipe(rev())
      .pipe(revdel())
      .pipe(gulp.dest(“dist”))
      .pipe(rev.manifest({ path: “manifest.json” }))
      .pipe(gulp.dest(“dist”))
    );

第 2 步。创建 revision:updateReferences gulp 任务

    gulp.task(“revision:updateReferences”, [“compile”, “revision:rename”], () =>
      gulp.src([“dist/manifest.json”,”dist/**/*.{html,json,css,js}”])
      .pipe(collect())
      .pipe(gulp.dest(“dist”))
    );

第 3 步。创建 compile:production gulp 任务

    gulp.task(“compile:production”, [“compile”, “revision:rename”, “revision:updateReferences”]);

这 3 步解决方案取自：

medium.com - Solving Browser Cache Hell With Gulp-Rev - 由 Felipe 伯纳德斯

【讨论】：

【解决方案2】：

感谢您的回答，但我们的解决方案略有不同。在我们公司，我们使用 weblogic 服务器，当我们部署应用程序时，它会一次又一次地在特定文件夹中创建所有资源（它包含以前的资源）。删除不必要的资源后，应用开始正常运行。

【讨论】：