从 create-react-app 中的预缓存中过滤掉资产

Question

我将 React 17 与 cra-template-pwa 结合使用来创建 PWA。我的 UI 库之一有数百个静态图像资源，它们都预加载到 PWA 中（我不使用其中的大部分）。这导致启用 PWA 的时间很长，甚至导致 Lighthouse 崩溃。我正在寻找解决问题的各种方法，但为了快速修复运行 lighthouse，我只想禁用预缓存。我一直无法找到具体信息如何做到这一点。有什么建议吗？

Answer 1

最干净的解决方案需要在 workbox-webpack-plugin 配置中使用 exclude 选项，但这需要在 create-react-app.

中使用 ejecting

不过，您可以在不使用 ejecting 的情况下做的事情是在将值传递给 precacheAndRoute().

之前显式过滤掉注入的 self.__WB_MANIFEST 数组中的条目

您的 service-worker.js 可能类似于：

import {precacheAndRoute} from 'workbox-precaching';

// self.__WB_MANIFEST will be replaced with an
// Array<{url: string, revision: string}> during the build process.

// This will filter out all manifest entries with URLs ending in .jpg
// Adjust the criteria as needed.
const filteredManifest = self.__WB_MANIFEST.filter((entry) => {
  return !entry.url.endsWith('.jpg');
});

precacheAndRoute(filteredManifest);

这种方法的缺点是您的 service-worker.js 文件会比必要的大一点（因为它将包含不需要的内联 {url, revision} 条目），并且您将如果您的其中一张图像的内容发生变化，最终会触发 service worker 更新流程，而不是绝对必要的。不过，那些不必要的服务工作者更新实际上不会造成任何损害或改变您的网络应用程序的行为。

从 create-react-app 中的预缓存中过滤掉资产

Filtering out assets from precaching in create-react-app

create-react-app

progressive-web-apps

workbox