I am developing a fairly large SPA (final ~ 30 MB), and, unfortunately, one of the requirements is that the application must be released as one large html file. I use webpack to connect all parts.
I am currently facing a performance issue (some libraries are quite large). They "eat" a lot of rams and affect the load time due to the evaluation of the code in the browser. I would like to postpone it and evaluate only those modules that are needed on the main screen of the application.
My idea is to use the same mechanism as webpack for sourcemaps:
https://webpack.js.org/configuration/devtool/ (eval-source-map)
Webpack simply puts the code in eval ("module code") , which prevents automatic evaluation by the Javascript engine. Of course, this code cannot be minimized, and sourcemap, like base64, is also added to it. I would like to do the same without source codes and, including, for zeroing. Moreover, I have an idea to reduce the size of the application by compressing the sources, so in the end it will be eval (gz.decompress ("module code")) .
This will be a huge change in the application, so before I am going to invent the wheel, I would like to ask you:
- Does this make sense from a problem point of view?
- Do you know any existing solutions?
- You suggest using any existing components from webpack, for example:
https://webpack.imtqy.com/docs/code-splitting.html
(/).