如何在不使用PHP的情况下动态加载JS文件避免缓存？

你之前用PHP拼接时间戳的逻辑可以直接用前端原生JS实现，也可以结合前端构建工具实现更合理的缓存策略，具体方案如下：

方案1：纯前端原生实现（无构建工具场景） #

通过JS动态创建script标签，拼接时间戳参数实现和PHP版本完全一致的效果：

const script = document.createElement('script');
// 取秒级时间戳和原PHP实现逻辑对齐
script.src = `lib/jquery/jquery.min.js?v=${Math.round(Date.now() / 1000)}`;
document.head.appendChild(script);

如果需要在JS加载完成后执行依赖逻辑，可以添加onload回调：

script.onload = function() {
  // 此处编写依赖jQuery的业务代码
}

如果有多个JS文件需要加载，可以封装通用加载函数：

function loadScript(url, onLoadCallback) {
  const script = document.createElement('script');
  script.src = `${url}?v=${Math.round(Date.now() / 1000)}`;
  if (typeof onLoadCallback === 'function') {
    script.onload = onLoadCallback;
  }
  document.head.appendChild(script);
}

// 调用示例
loadScript('lib/jquery/jquery.min.js', () => {
  console.log('jQuery加载完成，可开始使用');
});

方案2：构建工具方案（项目使用webpack/vite/rollup等工具时推荐） #

每次加时间戳会导致用户每次访问都重新加载所有JS文件，无法利用浏览器缓存提升加载速度，用构建工具的内容哈希方案更优：

• Vite项目：生产构建默认会给静态资源添加内容哈希后缀，无需额外配置即可实现「内容不变时复用缓存，内容变更时自动更新」的效果
• Webpack项目：修改webpack配置的output字段即可：

// webpack.config.js
module.exports = {
  output: {
    filename: '[name].[contenthash].js',
    clean: true
  }
}

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