Workbox: `maximumFileSizeToCacheInBytes` exception

[Mister-Hope]

Is there an exception field for maximumFileSizeToCacheInBytes? From the docs it seems not.

I am running in to a situation: I have a large app.[hash].js which is 1.35MB, and of course service worker should precache this file.

But there are some images in my page, most of them are small and act as icons, so I would want to precache them, and I also wanna drop some image files which are larger than 1MB.

Once I set maximumFileSizeToCacheInBytes, I will lose my app.js. So can an option be added to ignore file size?

May it should accept a array of glob strings.

[jeffposnick]

No, there isn't support for that level of control over opting-in to a larger maximum size for certain URLs.

What I'd suggest is that you set maximumFileSizeToCacheInBytes so that it's large enough to include the largest files that you need, and then use the manifestTransforms option to filter out entries that should be removed after the fact.

It's unfortunately more work, but it will give you the type of control you're after.

Something like the following would work:

const fs = require('fs');

const MAX_IMAGE_SIZE = 1024 * 1024; // Set to whatever max size you want.
const IMAGE_EXTENSION = '.png';

const removeLargeImages = async (manifestEntries) => {
  const warnings = [];
  const filteredManifestEntries = [];

  for (const entry of manifestEntries) {
    if (entry.url.endsWith(IMAGE_EXTENSION)) {
      // If it is a .png (or whatever extension you want), check its size.
      // Convert entry.url into a path on disk if needed.
      const stats = fs.statSync(entry.url);
      if (stats.size > MAX_IMAGE_SIZE) {
        // This will propogate the warning to the output of the build tool.
        warnings.push(`Skipped ${entry.url}, as its ${stats.size} bytes.`);
      } else {
        // If it's smaller than the max size, just keep it.
        filteredManifestEntries.push(entry);
      }
    } else {
      // If it's not a .png, just keep it.
      filteredManifestEntries.push(entry);
    }
  }

  return {
    warnings,
    manifest: filteredManifestEntries,
  };
};

const {count, size, warnings} = await generateSW({
  // ... other config ...
  manifestTransforms: [removeLargeImages],
});

[Mister-Hope]

Thanks for the answer!!!