Question

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

Answer 1

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

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

每次构建时，它都会生成一个具有不同名称的构建文件。

只要您不使用角度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天。因此浏览器会自动删除您的网络应用程序的所有已存储缓存并下载新副本。

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

Answer 2

如angular-cli docs所述，有两种启用缓存清除的方法。

- prod或--target = production会设置一些标志，包括--output-hashing = all触发缓存破坏的内容
您还可以在命令行上使用[none | all | media | bundles]的一个可能值设置--output-hashing本身。这对于测试/暂存构建非常有用。

Answer 3

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

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

Answer 4

如果使用出现缓存问题，这也很方便

ng build --watch

将命令更改为：

ng build --watch --output-hashing=all

这将通过散列js名称来缓存破坏所有js的代码。

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

4 个答案: