Next-pwa: How can i prevent import duplicated files ?

[Flosrn]

I use the next-optimized-images module who convert to webp on the fly all my images.

The problem is the service worker import twice file.. like this :

the .jpg and the .webp version

I would like to reduce the size of cache data and import all my images, except .wepb

In my next.config.js I tried something like that:

module.exports = withPlugins(
  [
    [
      withPWA,
      {
        pwa: {
          dest: "public",
          disable: process.env.NODE_ENV === "development",
          publicExcludes: ["([a-zA-Z0-9\\s_\\\\.\\-\\(\\):])+(.webp)$"]
        }
      }
    ],
    [...]
  ],
  nextConfig
);

But it seems it doesn’t work.

However I tested my regex expression and it works well here: https://regex101.com/r/CRiDxt/1

Someone would have an idea to solve my problem ? Thank you everyone

[Flosrn]

Possible way of fix my problem:

[
      withPWA,
      {
        pwa: {
          dest: "public",
          disable: process.env.NODE_ENV === "development",
          exclude: [/.*\.webp.*/]
        }
      }
    ],

It work (webp files are excluded) but I have an Error :

workbox-e032be30.js:formatted:14 Uncaught (in promise) bad-precaching-response: bad-precaching-response :: [{"url":"https://mydomain.now.sh/build-manifest.json","status":404}]
    at D (https://mydomain.now.sh/workbox-e032be30.js:1:11330)
    at async Promise.all (index 38)
    at async D.install (https://mydomain.now.sh/workbox-e032be30.js:1:10749)

[shadowwalker]

@Flosrn You should use publicExcludes here, it doesn't support regex pattern, but it use glob pattern. Put something like this:

publicExcludes: ['!*.webp']

[Flosrn]

@Flosrn You should use publicExcludes here, it doesn't support regex pattern, but it use glob pattern. Put something like this:

publicExcludes: ['!*.webp']

This is not work.. because my .webp files aren't in the public directory, only in .next folder after building

[shadowwalker]

Please don't put generated .webp files or other static asset files into .next/static folder, it's not desired from development point of view.

[Flosrn]

@shadowwalker it's the goal of next-optimized-images.

jpeg/png images can be converted to webp on the fly for an even smaller size
https://www.npmjs.com/package/next-optimized-images#webp

[Flosrn]

@shadowwalker please can you reopen the issue ?

[shadowwalker]

@Flosrn Just check in, are you still having the issue? If you need help, better to have a minimal error reproduce repo setup.

[chrsep]

Hi, I seem to be encountering a similar issue. It looks like next-pwa is caching all of the images generated by next-optimized-images. This throws one of my side project's initial page load from 52kb to over 800kb (tested by blocking the sw.js).

From what I've learned, since next-optimized-images uses webpack to process and generate the optimized images, the files it generates were automatically added to precache by workbox-webpack-plugin. so publicExcludes do not affect it.

What I found to be working though is to pass custom exclude property to next-pwa's config. But this would override next-pwa's built-in exclude rules, so I needed to copy the built-in exclude out to mine. This drops my initial page load to 234kb.

     { 
        pwa: {
          disable: process.env.NODE_ENV === "development",
          dest: "public",
          precacheHomePage: false,
          exclude: [
            // next-pwa's rule
            ({ asset }) => {
              if (
                asset.name.match(
                  /^(build-manifest\.json|react-loadable-manifest\.json)$/
                )
              ) {
                return true
              }
              // TODO: not sure how to uncomment this, requires dev from webpack options. Fine if pwa is disabled on dev.
              // if (dev && !asset.name.startsWith("static/runtime/")) {
              //   return true
              // }
              return false
            },
            // Excludes all images, next-optimzed-images v3 generates them to \static\chunks\images by default
            // Having a custom next-optimized-images output folder might be better so that we can have a more specific regex
            /.*images.*$/,
          ],
        },
      },

Could next-pwa support an exclude option that extends the built in one? I could open a PR. Or is there a better solution?

Links

• Without exclude (web) (code)
• With exclude (web) (code)

[shadowwalker]

It looks more sense to me that generated images are put into public/static/images folder instead of .next/static/chunks/images. Because that's the folder to serve all static assets. But when I try the configuration for next-optimized-images:

      {
        imagesPublicPath: "/static/images",
        imagesOutputPath: path.join(__dirname, "public/static/images"),
      }

It doesn't respect imagesOutputPath configuration. :(
I will add a options for you to resolve this issue.

[shadowwalker]

Fixed with version 2.6.2

[Flosrn]

For me the problem still the same in v2.6.2...
Do you put a special configuration in your options ?

[chrsep]

Yes, you'll still need to add a rule to exclude the files that you want to exclude on the config using the new buildExcludes attribute. I think something like this would work if you want to only exclude webp images generated by next-optimized-images

{
  pwa: {
    buildExcludes: [/chunks\/images\/.*\.webp$/]
  }
}

[Flosrn]

Yes, you'll still need to add a rule to exclude the files that you want to exclude on the config using the new buildExcludes attribute. I think something like this would work if you want to only exclude webp images generated by next-optimized-images

{
  pwa: {
    buildExcludes: [/chunks\/images\/.*\.webp$/]
  }
}

For me it work with this rule :

buildExcludes: [/images\/.*\.webp$/],

Thank you for your efforts 🙏