Angular如何防止缓存?
创始人
2024-10-29 07:00:31
0

在Angular应用程序中,可以使用以下方法防止浏览器缓存文件:

  1. 给应用之后的所有文件添加版本号(如?v=1.0.0),以便每次更改后都能强制客户端从服务器重新下载文件。可以在Angular的构建配置文件(angular.json, .angular-cli.json等)中配置输出文件名带上版本号:
"outputHashing": "all"

或者手动使用以下语法添加版本号:


  1. 让Angular服务端生成的HTML具有唯一性,以便客户端从服务器获得新页面的HTML而不是缓存的HTML。可以在app.module.ts文件中,通过指定providers为APP_INITIALIZER,以便在应用程序启动时执行:
import { NgModule, APP_INITIALIZER } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

export function initApp() {
  // 用随机数作为版本号
  const version = Math.random();
  document.cookie = `appVersion=${version}`;
}

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initApp,
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

这将在应用程序房启动时随机生成一个版本号,并以cookie的方式存储。每当重新启动应用程序时,都会生成新的版本号。

注:这种方法基于一个假设:如果HTML是唯一的,那么它的资源也应该是唯一的。

  1. 配置服务器(如Nginx)为禁用浏览器缓存,以便客户端从服务器获取更新的文件。可以将下面的代码放入服务器的配置文件中:
location / {
  //

相关内容

热门资讯

透视规律!兴动互娱辅助工具免费... 透视规律!兴动互娱辅助工具免费,小程序牵手跑得有开挂吗,揭秘攻略(有挂辅助)-哔哩哔哩;小程序牵手跑...
玩家必看攻略!新上游辅助反杀,... 玩家必看攻略!新上游辅助反杀,哈糖大菠萝诀窍,系统教程(有挂辅助)-哔哩哔哩;1、点击下载安装,哈糖...
传递经验!约战武汉怎么辅助,新... 传递经验!约战武汉怎么辅助,新星游辅助软件免费版,AI教程(有挂技巧)-哔哩哔哩;1.新星游辅助软件...
透视模拟器!鄱阳翻精辅助下载,... 透视模拟器!鄱阳翻精辅助下载,微乐家乡app插件,AI教程(有挂技术)-哔哩哔哩;鄱阳翻精辅助下载是...
玩家必知教程!上饶窝龙辅助,聚... 玩家必知教程!上饶窝龙辅助,聚财app辅助,AA德州教程!(存在有挂)-哔哩哔哩;小薇(透视辅助)致...
教学盘点!丫丫衡阳字牌辅助器,... 教学盘点!丫丫衡阳字牌辅助器,菜鸟黑桃a3辅助,wepoke教程(真是有挂)-哔哩哔哩;1、超多福利...
分享给玩家!柚子联盟辅助器下载... 分享给玩家!柚子联盟辅助器下载,新海贝之城app破解,技巧教程(证实有挂)-哔哩哔哩;是一款可以让一...
透视计算!开心网辅助工具,乾坤... 透视计算!开心网辅助工具,乾坤互娱辅助,辅助教程(确实有挂)-哔哩哔哩;1、点击下载安装,开心网辅助...
透视有挂!雀友会广东潮汕麻雀,... 透视有挂!雀友会广东潮汕麻雀,心悦填大坑辅助,攻略教程!(存在有挂)-哔哩哔哩;雀友会广东潮汕麻雀软...
透视线上!川南九九辅助,新广西... 透视线上!川南九九辅助,新广西老友辅助,AI教程(有挂秘籍)-哔哩哔哩;详细新广西老友辅助攻略(新广...