I have an react application which uses webpack(v5). In this application webpack SplitChunks plugin is used to split the bundle into multiple set of files. I have a requirement to stop loading some of the bundles until authentication happens. Because it is costly downloading unwanted js files for the auth check at that point, since if the auth is unsuccessful and it's having to http redirect the user to login page(Not developed using react).
Therefore since those chunks are added to index.html page as script tags in the project building phase, are there any ways that i can use to implement my requirement.
PS: At the moment there is an http event fired, when the auth is successful as well, which can also be used. Further the pre-defining the set of chunks can be done via wildcards, as hash is also added to the file names.
This has been tested by conditionally delaying out some chunks generated by the Webpack SplitChunks plugin. However, this breaks the app as all the chunks require for the app to function properly. The only option we can think of is code splitting and lazy loading.
Hope this will help someone experimenting with the same use case.