What is the best way to load scripts on a page?

Question

HTML

Got to gulp 'a to concatenate scripts and minify them. However, the question arose as to how best to ship them. The project is large, so there will be a stage of transition from the old system to the new one (in the old system, part of the scripts fit right into the page template in the script tag ). So, for example, jquery definitely needs to be loaded in the header. You can put your scripts in the footer. So?
There is such a thing as RequireJS , which dynamically loads scripts when necessary. What is the point of using it if it loads the server with unnecessary requests, and it is recommended to combine scripts into one file?

Answer 1

Maybe not right, but for validation https://developers.google.com/speed/pagespeed/insights/
Before </body>doing this:

<!--Динамическая подгрузка стилей и скриптов для валидатора-->
   <script>
    var script = document.createElement('script');
    var link = document.createElement('link');
    /*Подключаем стили*/
    document.getElementsByTagName('head')[0].appendChild(link);
    link.setAttribute('rel','stylesheet');
    link.setAttribute('type','text/css');
    link.setAttribute('href','css/style.css');
    /*Подключаем скрипт*/
    document.getElementsByTagName('head')[0].appendChild(script);
    script.type = 'text/javascript';
    script.src= 'js/script.js';
    </script>

The script.js file contains the connections

require('script1.js')
require('script2.js')
require('script3.js')
...
require('scriptN.js')

Answer 2

Here is a rather interesting method for loading scripts
https://github.com/agragregra/optimizedhtml-start-...