使用Workbox生成多个未格式化Service Worker文件问题求助

问题原因 #

• 默认拆分优化：Workbox默认会将Service Worker拆分为多个文件，核心是为了优化加载性能——把通用runtime逻辑、缓存策略代码、动态生成的缓存清单（带哈希）分开。带哈希的文件是缓存资源清单，哈希用于版本校验，防止浏览器缓存旧的缓存规则。
• 未配置单文件输出：你当前的操作没有指定合并输出的配置项，Workbox按照默认策略拆分出多个文件，这不是bug，是官方预设的优化行为。

生成单个格式化SW的解决方法 #

Workbox CLI #

在workbox-config.js中添加以下配置：

module.exports = {
  swDest: 'sw.js',
  inlineWorkboxRuntime: true,
  // 其他原有配置
};

执行workbox generateSW workbox-config.js即可生成单个文件。

Workbox Webpack插件 #

修改Webpack配置中的Workbox插件参数：

const { WorkboxWebpackPlugin } = require('workbox-webpack-plugin');

module.exports = {
  plugins: [
    new WorkboxWebpackPlugin.GenerateSW({
      swDest: 'sw.js',
      inlineWorkboxRuntime: true,
      // 关闭拆分相关配置
      chunks: null,
    }),
  ],
};

Node生成脚本 #

调用generateSW时传入对应参数：

const { generateSW } = require('workbox-build');

generateSW({
  swDest: 'sw.js',
  inlineWorkboxRuntime: true,
  globDirectory: 'dist/',
  globPatterns: ['**/*.{html,js,css}'],
}).then(({ count, size }) => {
  console.log(`Generated sw.js, which will precache ${count} files, totaling ${size} bytes.`);
});

更优替代方案 #

• 手写Service Worker：如果缓存需求不复杂，直接手写SW代码，完全自定义缓存策略（如CacheFirst、NetworkFirst），无需依赖Workbox的自动拆分，代码更易验证和调试。
• Vite PWA插件：基于Vite构建的项目，使用该插件可默认生成单个格式化SW，配置简洁，内置Workbox能力但封装更友好，自动处理资源缓存和版本更新。
• Rollup PWA插件：适配Rollup生态，同样默认输出单文件SW，配置灵活，适合非Webpack的构建场景。

内容的提问来源于stack exchange，提问作者Tech de Enigma