react-loadable
react-loadable copied to clipboard
New `ssr` option
Support optional ssr option to allow Loadable.preloadAll(true) to only preload modules that are needed for SSR.
Our use case: we only have a small subset of components that are visible to SSR (e.g. publically available content). In our e2e tests, preloadAll() takes over 3 minutes as we have a lot of components. It would be really great if SSR could just load the components needed for that specific page being rendered.
Although, I guess this solution requires us to just statically annotate the loadable components to indicate which ones to preload, whereas I would prefer a solution where there can be async rendering that loads the modules needed to render the page and nothing extra.
I would prefer a solution where there can be async rendering that loads the modules needed to render the page and nothing extra.
I have a solution in mind for that, however at this rate of feedback from @jamiebuilds I'm not sure if this is the right library to contribute to.
Yeah, I'm going to experiment with the other loadable components library and see if it helps. On Mar 1, 2022, 7:36 AM -0800, Troy Rhinehart @.***>, wrote:
I would prefer a solution where there can be async rendering that loads the modules needed to render the page and nothing extra. I have a solution in mind for that, however at this rate of feedback from @jamiebuilds I'm not sure if this is the right library to contribute to. — Reply to this email directly, view it on GitHub, or unsubscribe. Triage notifications on the go with GitHub Mobile for iOS or Android. You are receiving this because you commented.Message ID: @.***>
After I upgraded webpack 4 to wepack5 。The react-loadable plugin failed chunk.forEachModule is not a function. code:
function buildManifest(compiler, compilation) { var context = compiler.options.context; var manifest = {};
compilation.chunks.forEach(function (chunk) { chunk.files.forEach(function (file) { chunk.forEachModule(function (module) { var id = module.id; var name = typeof module.libIdent === 'function' ? module.libIdent({ context: context }) : null; var publicPath = url.resolve(compilation.outputOptions.publicPath || '', file);
var currentModule = module;
if (module.constructor.name === 'ConcatenatedModule') {
currentModule = module.rootModule;
}
if (!manifest[currentModule.rawRequest]) {
manifest[currentModule.rawRequest] = [];
}
manifest[currentModule.rawRequest].push({ id: id, name: name, file: file, publicPath: publicPath });
});
});
});
return manifest; }
How can I fix this bug and make it work?