Angular4始终要求浏览器清除缓存

Question

我在生产环境中有一个web应用程序。用户每天都在使用它，当我发布更新时，当用户返回到web应用程序时，他/她会查看web应用程序的旧版本。他需要刷新浏览器才能加载新版本。我该如何解决这个问题？我不能让数百个用户在每次发布更新时都刷新页面(一周3-4次)。我使用以下代码来构建我的前端应用程序: Angular4 with angular-cli

Answer 1

清理浏览器缓存的最好方法是在构建时使用散列。在angular cli应用程序中添加散列的命令是

ng build --prod --output-hashing=all

它将在每次构建时生成具有不同名称的构建文件。

以防你没有使用angular cli，你可以用这种方式声明你的组件来破坏缓存

@Component({
  selector: 'some-component',
  templateUrl: `./app/component/stuff/component.html?v=${new Date().getTime()}`,
  styleUrls: [`./app/component/stuff/component.css?v=${new Date().getTime()}`]
})

我们还可以在nginx服务器中设置缓存过期时间。运行此命令

sudo nano /etc/nginx/sites-available/default

编辑配置文件并添加以下行以设置缓存设置

location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
  expires 3d;
}

这会将过期时间设置为3天。因此，浏览器将自动删除您的web应用程序中存储的所有缓存并下载新的副本。

jpg|jpeg|png|gif|ico|css|js <--配置将缓存jpg/jpeg/png/gif/ico图像以及javascript

Answer 2

正如angular-cli docs中所指出的，有两种方法可以启用缓存破坏。

输出散列--prod或--=

1. 将设置许多标志，包括-- cache-busting
2. You - with =all，这是触发输出散列的原因。还可以在命令行上使用其可能的值之一设置--输出散列自身:none|all||
   1. 。这对于测试/暂存版本非常有用。

Answer 3

对于npm，请使用以下内容: Angular 7+

RUN npm run build -- --prod --output-hashing=all