progressive-web-apps - 不会被预缓存。配置 maximumFileSizeToCacheInBytes 以更改此限制 (PWA)

标签 progressive-web-apps service-worker workbox-webpack-plugin sw-precache

帮帮我。运行“npm run dev”后出现问题警告出现:

WARNING in css/app.css is 4.13 MB, and won't be precached. Configure maximumFileSizeToCacheInBytes to change this limit.

警告是什么意思?谁能解释一下?以及如何解决?谢谢好心人^^

最佳答案

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

第一个建议是:检查您是否真的需要那么多 CSS,以及是否可以减小文件大小。

如果这不可能,您可以调整 maximumFileSizeToCacheInBytes:

我不确定你是否使用 sw-precache,因为它是 outdated ,你应该切换到使用 workbox-build。

对于工作箱构建,通过设置 maximumFileSizeToCacheInBytes 使用以下配置:

// build-sw.js

import {generateSW} from 'workbox-build';

generateSW({
  swDest: './dist/sw.js',
  maximumFileSizeToCacheInBytes: <yourMaxFileSizeInBytesGoesHere>
  .....
});

关于progressive-web-apps - 不会被预缓存。配置 maximumFileSizeToCacheInBytes 以更改此限制 (PWA),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/73052540/

相关文章:

reactjs - 创建 React App PWA - 更改 Service Worker 的缓存策略

javascript - sw 预缓存 - 从不同域加载 Assets 的运行时缓存

javascript - Service Worker 被删除并且即使在注册时指定根范围后也不会收到推送事件

javascript - 显示 Service Worker 状态的消息

vue.js - 工作箱 webpack 插件从预缓存 list 中排除文件夹

vue.js - 当路由器处于历史模式时 PWA 不加载(基于 Vue CLI 3 的项目)

javascript - precacheAndRoute 在 addToCacheList 上出错

javascript - service worker CacheAPI 使用 `Time Cached` 属性和 cache.matchAll

progressive-web-apps - Chrome ServiceWorker postMessage

reactjs - workbox webpack 4 插件无法预缓存非 webpack 资源