vite pwa打包告警 xxx is xxx MB, and won‘t be precached. Configure maximumFileSizeToCacheInBytes..

版本

vite 4.4.4
vite-plugin-pwa 0.16.4

原因

VITE+PWA默认缓存最大的文件大小为2 * 1024 * 1024字节
如果构建出来的某个文件大于2M则会告警，例如：

warnings
assets/index-1c19bbdf.js is 2.92 MB, and won’t be precached. Configure maximumFileSizeToCacheInBytes to change this limit.

解决方案

修改vite.config.ts

...
export default defineConfig({
    
    
    plugins: [
        ...,
        VitePWA({
    
    
            ...,
            workbox: {
    
    
                ...,
                // 添加此项配置，增加需要缓存的最大文件大小
                maximumFileSizeToCacheInBytes: 4 * 1024 * 1024
            },
            ...
        })
    ],
    ...
})

相关问题

由于部分文件没有预缓存，在更新站点的之后，客户端会导致加载失败的异常，需要在客户端PWA完成更新后重新加载站点，才能正常加载。
原因是页面文件缓存了，但页面文件引用的资源文件没有预缓存，重新构建部署后，缓存的页面无法按照原资源文件地址下载对应资源文件，PWA更新完成后重新加载站点，更新的页面文件使用新的资源文件地址就能正确下载对应资源文件了。