Workbox v6.3.0预缓存报错d is not iterable问题求助

根因说明 #

报错Uncaught TypeError: d is not iterable出现在addToCacheList方法执行阶段，本质是该方法接收到的预缓存列表不是符合要求的可迭代数组。结合你未使用Workbox配套构建插件的场景，问题来自构建压缩环节错误改写了precacheAndRoute的入参结构，或是对Workbox内部依赖的过度压缩导致参数解析异常。

解决步骤 #

• 第一步：调整预缓存列表的声明方式，显式声明变量后传入，避免构建工具直接改写调用参数：

import { precacheAndRoute } from 'workbox-precaching';

// 提前声明预缓存列表
const precacheList = [
  { url: '/en/404.html', revision: null }
];
precacheAndRoute(precacheList);

• 第二步：调整构建配置，排除对Workbox相关依赖的压缩优化：
  如果使用Webpack + Terser压缩，添加Workbox依赖的排除规则，避免压缩工具错误改写Workbox内部逻辑：

// webpack.config.js 示例
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  // 其他配置保持不变
  optimization: {
    minimizer: [
      new TerserPlugin({
        exclude: /node_modules\/workbox-.+/
      })
    ]
  }
}

• 第三步：如果上述方案无效，可替换为底层precache方法调用验证逻辑：

import { precache } from 'workbox-precaching';

const precacheList = [
  { url: '/en/404.html', revision: null }
];
precache(precacheList);

额外注意事项 #

• 当预缓存条目设置revision: null时，Workbox会判定URL本身已包含版本标识，如果你的/en/404.html是固定无hash的路径，后续文件更新后Workbox无法自动识别变更，需要手动修改revision为文件内容哈希触发预缓存更新。

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