不会预先缓存。配置最大文件大小到缓存字节数以更改此限制 (PWA)

Question

帮帮我。我在运行"npm run dev"；出现警告：

css/app.css中的警告为4.13 MB，不会预先缓存。配置maximumFileSizeToCacheInBytes以更改此限制。

警告是什么意思？有人能解释一下吗？如何解决？谢谢好人^^

Answer 1

sw-precache检查服务工作者将在注册期间立即缓存(precache(哪些文件。在构建过程中，sw-precache发现app.css是应用程序的一部分，并希望将其添加到预缓存文件的列表中。但是你的app.css有4.13MB大，对于默认配置来说太大了。

第一个建议是：检查一下你是否真的需要那么多CSS，以及是否有可能减少文件大小。

如果不可能，您可以将最大FileSizeToCacheInBytes:调整为

我不确定你是否使用sw-precache，因为它已经过时了，你应该改用workbox构建。

对于工作簿生成，通过设置maximumFileSizeToCacheInBytes:使用以下配置

// build-sw.js
import {generateSW} from 'workbox-build';
generateSW({
swDest: './dist/sw.js',
maximumFileSizeToCacheInBytes: <yourMaxFileSizeInBytesGoesHere>
.....
});

Answer 2

我今天在使用vue3和使用插件@vue/cli-plugin-pwa时遇到了类似的问题。对于任何使用vuejs的人，在vue.config.js中添加以下代码。

module.exports = {
pwa: {
name: "App name",
themeColor: "#4338ca",
appleMobileWebAppCapable: "yes",
appleMobileWebAppStatusBarStyle: "black",
workboxPluginMode: "GenerateSW",
workboxOptions: {
maximumFileSizeToCacheInBytes: 5000000, // <---- increasing the file size to cached 5mb
},
},
};

这应该能解决问题。希望能有所帮助！