How to postpone code evaluation in browser?

Question

I am developing pretty big SPA (final ~30MB) and unfortunately one of requirements is that an app has to be released as one big html file. I use webpack to connect all pieces together.

Currently I am facing a problem with performance (some libraries are quite big ones). They "eat" a lot of ram and affects loading time due to code evaluation in browser. I would like to postpone it and evalute only these modules which are necessary at main screen of app.

My idea is to use the same mechanism like webpack does for sourcemaps:

https://webpack.js.org/configuration/devtool/ (eval-source-map)

Webpack simply puts code within eval("code of module") which prevents automatic evaluation by Javascript engine. Of course this code can't be minified and there is also sourcemap attached as base64 to the end. I would like to do same without sourcemaps and including uglification. Moreover I have an idea to reduce size of application by compressing sources so eventually it would be eval(gz.decompress("code of module")).

It will be a huge change in application so before I am going to reinvent a wheel I would like to ask you:

1. Does it make sense from problem point of view?
2. Do you know any existing solutions?
3. Do you suggest to use any existing components from webpack like:

https://webpack.github.io/docs/code-splitting.html

or write own solution from scratch (loader/plugin).

Answer 1

Don't do that what you want!

If you do want to find a weird trick to get what you want, try including your big JS file dynamically. See here or google jquery getscript. No additional Webpack actions required.

If not, please, continue reading.

---

You're dealing with the problem from the wrong perspective.

First, make sure you are doing all the obvious HTML/HTTP stuff:

1. You're downloading the gzip-ed version of the file (if not, google http script gzip)
2. You're including the <script> tag at the end of the body. This will start downloading and parsing JS only after HTML has been rendered.

Then, the most important, try to figure out where is the 30MB coming from. It's unlikely a fair sum of all your big fat dependencies. Usually, it's a particular bloated library (or two). Make sure you use got instead of request because the least is bloated. Find alternatives for the out-sized dependencies.

No single SPA in the world should have a 30MB JS bundle. I'm assuming your project isn't very large because otherwise it would be business critical and you would invest into providing a decent back-end strategy (e.g. code splitting, dead code elimination, etc.).