0

我正在使用 Next JS 进行电子商务。我正在尝试提高页面加载速度，该网站加载了大量 JS 文件，因为它拥有大量第三方供应商（并且无法删除）。我打算用 Service Worker 缓存一些静态资产。

我将使用使用 workbox-webpack-plugin 的库next-offline。这是我打算使用的配置：

workboxOpts: {
              swDest: '../public/service-worker.js',
              maximumFileSizeToCacheInBytes: 20000000,
              runtimeCaching: [
                {
                  urlPattern: /https:\/\/fonts\.googleapis\.com\/icon[\w\-_\/\.\:\?\=\&\+]*/,
                  handler: 'CacheFirst',
                  options: {
                    cacheName: 'google-fonts',
                    expiration: {
                      maxEntries: 10,
                      maxAgeSeconds: 30 * 24 * 60 * 60, // 1 month
                    },
                  },
                },
                {
                  urlPattern: /[\w\-_\/\.:]*\.(jpeg|png|jpg|ico|svg)\??.*/,
                  handler: 'CacheFirst',
                  options: {
                    cacheName: 'cache-img',
                    expiration: {
                      maxEntries: 15,
                      maxAgeSeconds: 2 * 24 * 60 * 60, // 2 days
                    },
                  },
                },
                {
                  urlPattern: /^((?!monetate).)*\.(js)$/,
                  handler: 'StaleWhileRevalidate',
                },
                {
                  urlPattern: /\/(browse.*|catalogsearch.*)$/,
                  handler: 'StaleWhileRevalidate',
                },
              ],
            },

所以，我的问题如下：

  1. 你觉得这个配置有风险吗？你会改变一些东西吗？我的意思是，过去我在 Service Worker 缓存 JS 文件时遇到了几个问题，我必须为每个文件设置一个版本才能使其正常工作。但是，现在看来workbox 解决了这个问题。
  2. 我应该为 Stale while revalidation 策略设置 maxAge 吗？每次用户重新加载页面时，我都想重新验证数据。但是这里它说它将使用缓存而不重新验证，直到 maxAge 时间完成。如果我没有在工作箱设置中设置 maxAge 会怎样？

我正在 Vercel 部署（在测试环境中）上对此进行测试，它似乎工作正常，我正在考虑将其移至生产环境。

谢谢，

4

1 回答 1

0

你可以使用 next-offline（我没怎么用过），或者你可以继续使用 workbox-webpack-plugin。需要注意缓存后要重新获取的文件（使用修订和哈希（在 url 上））。 阅读本节： https ://developers.google.com/web/tools/workbox/modules/workbox-precaching#how_workbox-precaching_works

于 2021-02-10T06:41:27.687 回答