Distribute the jQuery code in several .js

In terms of performance: VanillaJS is better, in fact after the last version of ECMAScript that came out, programming in JQuery has almost no sense, since JSvanilla has greatly improved its syntax to make it more "friendly". If you want my advice, use Vanilla if you work alone, put a lot less obstacles and limits when developing. If it is to find a job, learn jQuery, but learn it when you already dominate vanilla upside down and right.

To improve performance, you should use code minifiers, such as Webpack, Gulp, Laravel-Mix, etc.

And about "how to save them" depends on the platform you use. The vast majority stores in the assets folder the code dependencies of the front, and they are divided by each view, then in the controller that loads the dependencies of each view you are telling them which modules to load. The same with CSS. It does not make sense to load the complete CDQ of jQuery for the whole page, although it is a common practice nowadays, it is optimal to define each route the load of elements that correspond to it.

You could do something like this:

let nuevoScript = document.createElement('script');
nuevoScript.setAttribute("src", "el/otro/script.js");
document.body.appendChild(nuevoScript);

As regards the performance of having only one script, things seem to have changed. Please open css-tricks.com in view-source and see how many script elements you have.

This is a link to a similar question asked in Stack Overflow in English: link