Does preloading of modules make sense?

An easy to implement technique relieving developers of bundling

JavaScript modules offer enjoyable developer experience. However, it is believed that modules might disappoint exceptionally demanding users on the first-time visit because, in comparison to a single bundle, numerous modules need more time to load.

When a browser load a web application composed of JavaScript modules, it first loads the modules listed in the HTML. Then the browser discovers import statements in the just loaded modules. The browser loads the required modules and again discovers import statements specifying additional modules to load. Eventually, after several loading and parsing iterations, the browser loads independent leaf modules without import statements.

During gradual loading of the entire module dependency tree, waiting for responses from the network takes most of the time. For example, requesting the root module specified in the HTML and waiting to receive it is a waste of the network bandwidth. If all the modules are requested immediately, and not in their hierarchical order, the time spent on loading all the modules will be shorter.

The problem is that the browser does not know in advance what modules it will have to load. Only after loading a module the browser sees its imports. And normally the module dependency tree starts from a single root module specified in HTML.

link tag with type="modulepreload" can be used to inform the browser in advance what modules it will have to load. When all the modules constituting the application are declared in the HTML, the browser immediately starts loading them without wasting users’ time on hierarchical discovery and loading of dependencies.

Although Chrome parses the preloaded modules, it does not preload the discovered dependencies. So for the optimal performance, all the application modules have to be declared. It is actually also easier to declare all the modules than to declare only some selected.

To demonstrate how preloading reduces web page loading time I will use a sample page no.html that in total loads 255 tiny symbolic modules. The sample modules have numbered names starting from module1.js through module255.js. The dependency…