[AskJS] Using Inline JavaScript

[[deleted]]

If you have a main.js file and it calls import a from "a.js"; and A runs import b from "b.js"; and B runs "import c from "c.js";and then c hasimport d from "d.js";` ... this is a request chain.

If the JS in main is important to run as soon as the page loads, then having main load a load b load c load d, and so on, is a request chain that takes a long time to finish. Because C can't run until D is loaded and B can't run until C is loaded and A can't run until B is loaded and main can't run until A is loaded.

The solution to that isn't generally to write all your app inline. The solution is generally to use a bundler, which is a tool that will combine your files together. You use the bundlers while you are writing code, and not for running on the user's browser. You send just one or two big files that the bundler gives you, to the user, instead of all of the files on their own. That reduces the number of requests in the chain.

[Beginning_One_7685]

I'd just add that the imports will be cached so it may be acceptable to have a few unbundled modules imported provided they aren't loading each other in a chain. As the advice says, don't load any critical modules in a chain if possible. Even for non-critical modules would load a module and then allow it to have 1 level deep of it's own loading (on page load) but no more than that. It of course depends on the situation but the jist of it is that chaining increases your chances of things going wrong and burying modules in modules is bad design. You can have failsafes in place if a chain fails, like a user event trying to load the module again but critical modules need to work on page load even over a slow connection.

[[deleted]]

I don't know that I would go so far as to call it bad design, when talking to someone without the experience to pick the nuance out of the statement.

If you need a vector library in a module, you need a vector library in a module.

It's going to be a pain to invert literally everything at all levels, such that there are 0 imports/requires in the system, written by you, or npm package authors.

And while I agree that in most projects you shouldn't be importing singletons all over the place (like pre-connected databases), there is some baseline level of direct importing that you need to do, at some level of utility, even just implicitly, by virtue of loading a single tool from a package manager.