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

【问题标题】：Filtering out assets from precaching in create-react-app从 create-react-app 中的预缓存中过滤掉资产
【发布时间】：2021-04-16 01:46:51
【问题描述】：

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

【问题讨论】：

标签： create-react-app progressive-web-apps workbox

【解决方案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 更新实际上不会损害任何东西或改变您的 Web 应用程序的行为。

【讨论】：

太棒了！我早该想到的！