More control over react-loadable-manifest.json size

[alaingoga]

Feature request

Is your feature request related to a problem? Please describe.

We are migrating a large application based on react loadable to nextjs and dynamic. In the past we have serious issues parsing react-loadable-manifest.json to collect styles on SSR. But in this case our issue is related to AWS lambdas, since we have hundreds of lazyloaded modules the manifest generated is around 50MBs, and the code unzipped on aws is above the 250MBs allowed. Also notice in client __NEXT_DATA__.dynamicIds array has about 1400 length and we still need to review the impact on initial rendering performance in case that array is getting parsed.

Describe the solution you'd like

Even having a lot of lazyloaded modules only few are needed on SSR. Would be ideal to only collect in that manifest what is needed on server side.

Describe alternatives you've considered

Our work around is to use a pattern in the webpackChunkName like: "my-module-ssr-cpm" and later add a filter in a custom plugin based on both: the original react loadable plugin and the one coming with nextjs.

Additional context

Manifest collector looks something like this inside the custom webpack plugin:

function buildManifest(compiler, compilation, chunkName) {
  const { context } = compiler.options;
  const manifest = {};
  compilation.chunks.forEach((chunk) => {
    chunk.files.forEach((file) => {
      if (!file.match(/\.js$/) || !file.match(/^static\/chunks\//)) {
        return;
      }
     /* Filter using plugin option opts.chunkName with a regex to match 'ssr-cpm'
      if (chunkName.test(chunk.name)) {
        // eslint-disable-next-line
        for (const module of chunk.modulesIterable) {
          let currentModule = module;
          const { id } = module;
          const name = typeof module.libIdent === 'function' ? module.libIdent({ context }) : null;
          const publicPath = url.resolve(compilation.outputOptions.publicPath || '', file);
          
         if (module.constructor.name === 'ConcatenatedModule') {
            currentModule = module.rootModule;
          }

          if (!manifest[currentModule.rawRequest]) {
            manifest[currentModule.rawRequest] = [];
          }
          manifest[currentModule.rawRequest].push({
            id,
            name,
            file,
            publicPath,
          });
        }
      }
    });
  });
  return manifest;

With this we are generating a json around 100Kb.