使用Preact CLI搭建PWA时如何配置maximumFileSizeToCacheInBytes参数

首先可以确认，你完全可以通过Preact CLI提供的自定义Service Worker相关API修改maximumFileSizeToCacheInBytes参数，共有两种常用修改方式，按需选择即可：

方式1：修改preact.config.js全局配置 #

• 找到项目根目录下的preact.config.js文件，不存在则手动创建
• 写入以下配置，示例将预缓存大小限制调整为5MB（可自行调整数值，单位为字节）：

export default (config, env, helpers) => {
  // 仅生产构建时修改SW配置
  if (env.production) {
    const workboxPlugin = helpers.getPluginsByName('WorkboxPlugin')[0].plugin
    // 可自行调整阈值，以下示例为5MB
    workboxPlugin.config.maximumFileSizeToCacheInBytes = 5 * 1024 * 1024
    // 可选：排除sourcemap文件避免占用缓存配额
    workboxPlugin.config.exclude.push(/\.map$/)
  }
}

方式2：在自定义sw.js中直接配置 #

如果你已经在自定义sw.js中引入了preact-cli/sw的工具方法，直接在预缓存调用时传入配置即可：

import { precacheAndRoute } from 'workbox-precaching'
import { getFiles } from 'preact-cli/sw'

// 预缓存时指定最大文件大小阈值，示例为5MB
precacheAndRoute(getFiles(), {
  maximumFileSizeToCacheInBytes: 5 * 1024 * 1024
})

// 其他自定义Service Worker逻辑保持不变

配置完成后重新执行构建命令，原大小超限警告即可消除。

内容的提问来源于stack exchange，提问作者Jorge Cavaleiro Dias