Skipping static resource max size is 2.1 MB causes service worker to not cache main.js.

[jagreene]

Not sure if this should be posted here or SWPrecacheWebpackPlugin, but I figured it should be documented somewhere since it was rough to diagnose.

Description

When the webpack JavaScript bundle becomes to large, yarn build throws a warning:

Skipping static resource "/home/austin/cra-swcache-broken-repro/build/static/js/main.4f79027e.js" (2.77 MB) - max size is 2.1 MB

as is mentioned in #2433. This seems to cause SWPrecacheWebpackPlugin to skip adding the bundle to the list of assets it will cache, but this is not clear from the error message that this is the case. This breaks any offline functionality an app might have.

Expected behavior

Either a warning about file size and the file is still added to the cache, or a more explicit warning that this error is coming from or causing an error in SWPrecacheWebpackPlugin and that the resource won't be cached.

Actual behavior

As seen in the snippet bellow, there is no main.js in the generated service-worker.js.
"use strict";function setOfCachedUrls(e){return e.keys().then(function(e){return e.map(function(e){return e.url})}).then(function(e){return new Set(e)})}var precacheConfig=[["index.html","8271cbe9809a6bbeca76 83483ce358f0"],["static/css/main.9a0fe4f1.css","3473922d6aed4c20bb69846d6027cacf"],["static/media/logo.5d5d9eef.svg","5d5d9eefa31e5e13a6610d9fa7a283bb"]],cacheName="sw-precache-v3-sw-precache-webpack-plugin-" ...

Environment

Run these commands in the project folder and fill in their results:

1. npm ls react-scripts: [email protected]
2. node -v: v7.10.0
3. npm -v:4.6.1

Then, specify:

1. Operating system: Arch Linux
2. Browser and version: Google Chrome Version 58.0.3029.110 (64-bit)

Reproducible Demo

Demo

(Thanks for all the work you all have put into CRA, it has made my life a lot simpler!)

[gaearon]

Ideally I want to remove that warning completely (the text is not very useful).
Instead I'd like to show a warning inline in the built file list.

[gaearon]

To work around false positives like #2433 I'm going to silence the warning for now.

If more people feel strongly about this we can add special code to handle this into CRA itself but for now I'd recommend adding a custom postbuild step.

  "scripts": {
    "build": "react-scripts build",
    "postbuild": "node check-service-worker.js",

check-service-worker.js

'use strict';

var fs = require('fs');

var manifest = require('./build/asset-manifest');
var sw = fs.readFileSync('./build/service-worker.js');

Object.keys(manifest).forEach(key => {
  if (key.endsWith('.map')) {
    return;
  }
  var path = manifest[key];
  if (sw.indexOf(path) === -1) {
    throw new Error('Not cached: ' + manifest[key]);
  }
});

If more people get burned by this and ask for this feature we can integrate it more tightly but for now I'm punting on this. If you feel strongly about this and want to help I'm happy to discuss an ideal way to handle this in a follow up issue.

[JFGHT]

I am having the very same issue here (my vendors bundle is just too large).
So what should be the actual expected behaviour? Why not including the file into the list of cached assets?

[ljani]

I was also burned by suppression of this very important message. My app was 2.2MB, which crossed the limit and thus main.js was left out from cache. Took me a longer than I care to admit to figure out why my app didn't work when there was no network. I finally found this lovely piece of code. By removing it I understood why main.js was not cached.

To fix my app I edited webpack.config.prod.js to contain this:

new SWPrecacheWebpackPlugin({
    // ...
    maximumFileSizeToCacheInBytes: 10 * 1024 * 1024,
}),

I'd say you should restore the message and maybe turn it into a warning instead of error. I admin I didn't quite understand the false positive problem mentioned above, but turning this into a warning won't cause the compilation to fail, right?