Angular项目中如何避免require引入的资源被浏览器缓存？

1. 给脚本URL添加动态查询参数 #

浏览器依据完整URL缓存资源，修改URL的查询参数即可强制重新请求。直接调整require的路径，添加时间戳或版本号：

// 用当前时间戳生成唯一URL，每次加载都触发新请求
require('../scripts/my-merge-images.js?v=' + Date.now());

// 也可使用固定版本号，更新脚本时手动修改版本值
require('../scripts/my-merge-images.js?v=1.0.2');

注意：若该脚本属于Webpack打包范围，动态参数可能导致依赖解析异常，此方法更适合未被打包、直接从静态目录加载的脚本。

2. 用Angular HttpClient动态加载脚本 #

放弃require，通过HttpClient主动请求脚本内容，再动态插入DOM，全程控制URL避免缓存：

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class ScriptLoaderService {
  constructor(private http: HttpClient) {}

  loadMergeImagesScript() {
    const scriptUrl = '../scripts/my-merge-images.js?v=' + Date.now();
    this.http.get(scriptUrl, { responseType: 'text' }).subscribe(content => {
      const scriptEl = document.createElement('script');
      scriptEl.textContent = content;
      document.body.appendChild(scriptEl);
    });
  }
}

在需要使用脚本的组件中调用该服务方法即可。

3. 配置构建工具添加缓存哈希（生产环境推荐） #

若脚本属于Webpack打包流程，在配置中给输出文件添加内容哈希，脚本内容变化时文件名自动更新，浏览器会加载新文件：

// webpack.config.js
const path = require('path');
const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
  output: {
    filename: '[name].[contenthash].js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    new CopyPlugin({
      patterns: [
        {
          from: './src/scripts/my-merge-images.js',
          to: 'scripts/my-merge-images.[contenthash].js'
        }
      ]
    })
  ]
};

之后在代码中引用带哈希的文件名，或通过Webpack动态导入加载脚本。

4. 服务器端设置缓存控制头 #

在托管静态资源的服务器上，给my-merge-images.js配置Cache-Control响应头，强制浏览器不缓存或每次验证资源：

• 完全禁止缓存：Cache-Control: no-cache, no-store, must-revalidate
• 每次请求验证资源：Cache-Control: max-age=0, must-revalidate
  以Nginx为例，可在配置文件中添加：

location ~* /scripts/my-merge-images.js {
  add_header Cache-Control "no-cache, no-store, must-revalidate";
}

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