Angular4总是需要浏览器缓存清理

Question

我在生产环境中有一个Web应用程序.用户每天都在使用它,当我发布更新并且用户返回到Web应用程序时,他/她查看旧版本的Web应用程序.他需要刷新浏览器才能加载新版本.我怎么解决这个问题？每次发布更新(每周3-4次)时,我都无法告诉数百名用户刷新页面.我用以下来构建我的前端应用程序:Angular4 with angular-cli

Answer 1

清理浏览器缓存的最佳方法是在构建时使用散列.在angular cli app中添加散列的命令是

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 文档中所述，有两种启用缓存清除的方法。

1. --prod 或 --target=product 将设置许多标志，包括 --output-hashing=all ，这会触发缓存清除
2. 您还可以在命令行上设置 --output-hashing 本身，其可能值之一是 [none|all|media|bundles]。这对于测试/暂存构建很有用。