怎么使用Angular8r打包时怎么清除缓存

530 阅读3分钟

一、如何清除

在 Angular 中,要清除缓存并确保每次部署新版本时浏览器都会重新下载更新的文件,可以通过修改生成的文件名来实现。

Angular CLI 提供了 --outputHashing 选项,可以生成带有哈希值的文件名,以便有效地清除缓存。可以将该选项设置为 all 来为所有生成的文件添加哈希值。

以下是在执行构建命令时如何添加 --outputHashing=all 参数:

ng build --prod --outputHashing=all

上述命令中的 --prod 选项表示以生产环境模式进行构建,而 --outputHashing=all 选项指定了哈希策略为全部文件。执行此命令后,Angular CLI 将根据文件内容生成相应的哈希值,并将其追加到文件名中,例如 main.4a82cb3e7e1f6d165b2e.js,从而有效地清除缓存。

请注意,将哈希值添加到文件名中意味着每次构建都会生成不同的文件名,浏览器会识别这些文件为新的资源,并重新下载它们。

通过使用 --outputHashing=all 选项执行构建命令,您可以实现清除缓存的效果,并确保用户获取到最新的文件版本。

二、怎么区别观察到效果呢?

1、文件名中的哈希值:在构建完成后,Angular CLI将会生成具有哈希值的文件名,这些哈希值将根据文件内容进行计算,以确保每次更改都会生成一个唯一的文件名, 2、缓存失效:由于每个生成的文件名都是唯一的,客户端和代理服务器将无法从缓存中获取之前的文件版本,因为文件名发生了变化,浏览器会自动请求新的文件,而不是用缓存的旧版本 3、HTML引用更新:如果你的应用程序在HTML文件中引用了生成的输出文件(例如脚本或样式表),那么经过构建后,这些引用也将更新以反映出新的哈希文件名,可以查看html文件,确认引用的文件名是否已更新为包含哈希值的版本

总结:目前个人认为就是修改代码,使文件内容不同后,打包时哈希值就会发生变化,不修改代码,内容不变,哈希值不会变化

三、为什么会发生变?

每次修改代码并进行打包时,生成的哈希值通常都会不同。这是因为哈希值是根据文件内容计算得出的,即使只有微小的更改,也会导致文件内容的变化,从而生成不同的哈希值。

生成不同的哈希值有助于确保每个打包版本具有唯一的文件名。这对于客户端缓存机制非常重要,因为浏览器可以通过文件名来判断文件是否发生了更改并重新下载更新的文件。如果文件名中的哈希值在每次更改时都不同,浏览器就可以识别新的文件版本,并及时获取最新的代码和资源。

因此,每次修改代码后,Angular CLI 在打包时会生成具有不同哈希值的文件名,以确保每次更改都会生成一个唯一的文件名。