代码分割致CSS Chunk过期，谷歌索引缓存页面显示原始HTML求方案

1. 稳定Chunk文件名 #

• 改用基于文件内容哈希的命名规则（Webpack配置中使用contenthash），只有文件内容变更时才改变Chunk名称，未修改的资源保留原有路径，减少缓存失效范围。
• Webpack配置示例：

module.exports = {
  output: {
    filename: '[name].[contenthash].js',
    chunkFilename: '[name].[contenthash].chunk.js',
    assetModuleFilename: '[name].[contenthash][ext]'
  }
};

2. 优化Prerender.io缓存策略 #

• 根据部署频率（每周1-2次）设置缓存TTL为3-4天，确保旧缓存及时更新。
• 部署新版本后，主动调用Prerender.io API批量清除旧缓存，或触发全站缓存刷新；自托管版本可在部署脚本中添加缓存文件删除步骤。

3. Cloudflare缓存协同配置 #

• 对带哈希的静态资源（CSS/JS）设置长缓存时间，对无哈希的入口文件设置较短缓存，启用Cloudflare的版本化资源缓存规则。
• 部署完成后，同步刷新Cloudflare相关页面缓存，与Prerender缓存更新保持一致。

4. 添加资源加载失败回退 #

• 在HTML中注入当前应用版本标识，比如：

<meta name="app-version" content="v1.2.3">

• 全局监听资源加载错误，当CSS加载失败时，动态替换为当前版本的资源路径：

window.addEventListener('error', (e) => {
  if (e.target.tagName === 'LINK' && e.target.rel === 'stylesheet') {
    const version = document.querySelector('meta[name="app-version"]').content;
    const newUrl = e.target.href.replace(/v\d+\.\d+\.\d+/, version);
    e.target.href = newUrl;
  }
});

5. 调整预渲染触发时机 #

• 不在部署前预渲染页面，改为部署完成后通过CI/CD脚本（比如Heroku的post-deploy钩子）调用Prerender API重新渲染关键页面，确保预渲染内容使用最新Chunk文件。

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