webpack 4的工作箱服务工作者

时间:2018-04-05 16:29:51

标签: reactjs webpack service-worker workbox

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

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

enter image description here enter image description here

在没有第二次电话之前

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

0 个答案:

没有答案