Question

我正在使用angular2进行Web开发，Jenkins用于持续集成，当我在每个sprint结束时发布代码时，它将部署在CI服务器上。

但是，当用户加载UI时，默认情况下他们没有获得新的UI更改，他们必须清除缓存（我不希望用户清除缓存或仅为此UI禁用缓存）

如何以编程方式处理浏览器以不缓存旧文件并默认重新加载新更改（至少在开发中）

注意：我现在设定：

import { enableProdMode } from '@angular/core';
enableProdMode();

没有任何文件说明这是原因，删除它也无济于事。

Answer 1

实现这种“缓存破坏”的两种流行方式是：

在文件请求末尾使用提供版本号的查询字符串。例如，当您创建javascript文件时，您将其命名为“my-file.js”。然后在您的HTML中，您将其请求：


<script type="text/javascript" src="my-file.js?v=1.0.0"></script>

当您对文件进行一些更改时，请将您的请求更新为：


<script type="text/javascript" src="my-file.js?v=1.0.1"></script>

只要更改它，您就可以使用所需的任何查询字符串。浏览器将其视为不同的文件，但它不应影响服务器作为响应发送的文件。

如果您使用的是像webpack或systemJS这样的捆绑器，它们可以自动包含散列作为文件名的一部分。此哈希可以根据文件内容进行更改，以便在内容更改时文件名发生更改，从而不再缓存文件。需要注意的是，您需要更新HTML中请求的文件名。同样，大多数工具都可以自动为您执行此操作。

实现此目的的webpack示例配置是：

output: {
        path: 'dist',
        publicPath: '/',
        filename: 'js/[name].[chunkhash].js'
    },

然后使用HtmlWebpackPlugin自动生成index.html并注入正确的文件名（使用inject：true）：

 plugins: [
            new HtmlWebpackPlugin({
                filename: '../index.html',
                template: './index.html',
                inject: true
            }), ...

有关webpack文件命名的更多信息：

https://github.com/webpack/docs/wiki/Configuration#output

有关html webpack插件的更多信息：

https://github.com/ampedandwired/html-webpack-plugin#basic-usage

Answer 2

我使用特殊的.htaccess文件修复了该问题。只需取消注释“浏览器缓存”部分： https://gist.github.com/julianpoemp/bcf277cb56d2420cc53ec630a04a3566

angular2禁用浏览器缓存

2 个答案: