聚合物 CLI 构建 |缓存清除技术

Polymer CLI Build | Cache Busting Techniques

一点背景知识: 我的应用程序基于 Polymer 2.x 构建,托管在不支持 HTTP/2 并且没有 HTTPS 证书的服务器上。我们必须支持 IE11、Chrome、Firefox 和 Safari。

问题: 我 运行 遇到浏览器缓存问题。我希望使用 Polymer CLI 生成的服务工作者来处理缓存清除。但是,由于我们客户的服务器没有启用 HTTPS,我们无法使用它。无论如何,我们必须在单个构建中支持 IE 11,因此服务工作者不是一个选项。

我想不出在新部署中破坏缓存的方法。在 Polymer CLI github 页面上,有一个关于此主题的未解决问题,但自 2016 年以来就没有任何吸引力。从观看 Polymer 上的 YouTube 视频来看,似乎有(或曾经有)一种使用 Gulp 拦截构建的方法,但我似乎无法弄清楚。

非常感谢任何帮助!

如果您想使用 gulp 构建 Polymer 项目,您可以使用 polymer-build 库。您可以在这里阅读:

https://github.com/Polymer/polymer-build

这里的文档中简要提到:

https://www.polymer-project.org/2.0/toolbox/build-for-production#use-polymer-build

然后您可以使用 gulp-rev 之类的方法来缓存 bust,但您必须确保您没有重写自定义元素名称,而只是重写文件名和导入路径。 (我用 gulp-rev-all 试过一次,默认情况下它用 <app-header-a9fe00> 或类似的东西替换 <app-header>。)

创建构建时运行polymer build sw-precache-config.js

我创建了 gulp-polymer-build 来帮助解决这个问题。它借鉴了 polymer-cli build 代码,并支持 polymer.json 中的构建配置。它允许您在构建之前修改源流,然后为您在 polymer.json 中配置的所有构建修改分叉流。这使得使用 gulp-revgulp-rev-replace 进行资产版本控制变得容易。