How to disable prefetch in VueJS PWA?

When you generate a PWA app using vue ui you can expect the following behavior. All files you have in your dist folder are precached by browsers. In other words, when you navigate to your app a browser will quietly download all the files and cache it for further use.

The problem here is that browsers will also download async chunks which could never be used by a user. For example, I have an admin-settings route and a regular user does not need to download it at all.

Now I'm trying to disable this behavior, here's modified vue.config.js file:

module.exports = {
  chainWebpack: config => {
    config.plugins.delete('prefetch-index')
    config.plugins.delete('preload-index')
  },
  pwa: {
    workboxOptions: {
      exclude: [/.*/],
      runtimeCaching: [{
        urlPattern: new RegExp('^https://example.com.*'),
        handler: 'CacheFirst',
        options: {
          cacheableResponse: {
            statuses: [200]
          }
        }
      }]
    }
  },
  ...
}

Right now everything works as expected and browsers do not prefetch resourses. The problem, however, is that when I upload a new version of a file the app is not updated. Browsers still use the previos version of the file.

I'm stuck, any advice, good sirs?

P.S. Figured it out.

This line caused index.html to be also cached.

urlPattern: new RegExp('^https://example.com.*')

After changing it everything works as expected.

urlPattern: new RegExp('^https://example.com/.+')

Now the problem is that the old version of a cached file is not deleted from cache. The size of cache would grow a lot with each new deployment.

Any advice?