webpack 4的工作箱服务工作者

Question

目前，我正在尝试与服务工作者一起缓存api调用。它会缓存api请求。但是，它似乎没有利用缓存。 当我检查devtool上的网络选项卡时，我看到来自服务工作者和工作箱的请求，甚至比正常请求更慢。

我尝试使用webpack 3的旧版本，缓存api几乎立即返回3ms。

在没有第二次电话之前

workbox-webpack-plugin config

new workboxPlugin.GenerateSW({
  swDest: 'sw.js',
  clientsClaim: true,
  skipWaiting: true,
  runtimeCaching: [
    {
      urlPattern: new RegExp('/'),
      handler: 'staleWhileRevalidate',
    },
    {
      urlPattern: new RegExp('https://api/'),
      handler: 'cacheFirst',
      options: {
        cacheName: 'api',
        expiration: {
          maxEntries: 100,
          maxAgeSeconds: 72 * 60 * 60
        },
        cacheableResponse: { statuses: [0, 200] },
      }
    },
  ]

}）

服务人员要求创造某种瓶颈？

问题 - 网络请求中2段时间的差异是什么？正如您从图像中看到的那样，第一次请求时有3.53s和2.01s