咨询Angular 2+Webpack部署后无需客户端清缓存的缓存实现方案

首先得明确：没有纯客户端侧的完美解决方案。因为浏览器的缓存行为是由服务器返回的Cache-Control等响应头决定的，客户端只能被动遵循这些规则，没法主动强制浏览器忽略缓存加载最新资源（除非用户手动刷新，或者你用location.reload(true)这种强制刷新，但这需要触发时机，本质还是依赖用户操作或前端主动检测）。

不过，我们可以通过修改Webpack配置，从构建层面彻底解决这个问题，这也是前端项目处理缓存更新的标准方案：

1. 给输出文件添加内容哈希（Content Hash） #

当前你的output配置里，文件名是固定的[name].js，chunk文件名是固定前缀+[name].js——这就导致浏览器认为文件没变化，会一直用缓存。我们需要把文件名改成内容哈希命名，也就是当文件内容变化时，文件名的哈希部分也会变化，浏览器会自动请求新文件。

修改output部分：

output: {
  filename: '[name].[contenthash].js', // 给app、vendor等入口文件加内容哈希
  chunkFilename: '[name].[contenthash].js', // 给懒加载chunk加内容哈希，去掉之前的固定前缀
  publicPath: './build/',
  path: path.resolve(__dirname, 'build')
}

[contenthash]是Webpack提供的变量，会根据文件内容生成唯一哈希值，文件内容不变哈希就不变，内容变了哈希也跟着变。

2. 用HtmlWebpackPlugin自动注入带哈希的脚本 #

如果手动在HTML里写脚本路径，每次构建后都要修改，太麻烦。我们可以用html-webpack-plugin自动生成HTML文件，并注入最新的带哈希的脚本标签。

首先安装插件：

npm install html-webpack-plugin --save-dev

然后在webpack.config.js的plugins数组里添加：

const HtmlWebpackPlugin = require('html-webpack-plugin');

// ... 其他插件配置

plugins.push(
  new HtmlWebpackPlugin({
    template: './index.html', // 你的原始HTML模板文件路径
    filename: '../index.html', // 输出的HTML文件位置，根据你的项目结构调整
    inject: 'body' // 把脚本注入到body末尾
  })
);

这样每次构建后，生成的HTML里会自动引入带哈希的app.xxxx.js、vendor.xxxx.js等文件，不用手动修改。

3. 配置服务器缓存策略（关键） #

最后要在服务器上设置缓存规则：

• 对于带哈希的静态资源（比如app.xxxx.js、vendor.xxxx.js），设置长期缓存，比如Cache-Control: public, max-age=31536000（一年），因为这些文件的哈希变了才会有新请求，不会有缓存问题。
• 对于入口HTML文件（比如index.html），设置不缓存或短缓存，比如Cache-Control: no-cache或max-age=60（一分钟），这样浏览器每次都会拉取最新的HTML，从而加载最新的带哈希的JS文件。

关于你的备选方案 #

如果暂时没法修改Webpack配置和服务器缓存策略，检查API版本提示用户刷新是可行的：

• 在后端加一个接口，返回当前应用的版本号（比如/api/version）。
• 前端在应用启动时请求这个接口，把版本号和存在localStorage里的旧版本号对比。
• 如果版本不一致，弹出提示告诉用户有新版本，引导他们点击刷新按钮（用location.reload()或者location.reload(true)强制刷新）。

这个方案虽然需要用户手动操作，但比让用户自己清缓存要友好得多。

内容的提问来源于stack exchange，提问作者iniravpatel