Import JS for pages separately

Question

Hello! There is such a structure:

header:

<!DOCTYPE html> <html> <head> ... </head> <body>

footer:

 <div class="footer-text">Footer text</div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> </body> </html>

page1:

 import header <div class="blah-blah">page1</div> import footer

page2:

 import header <div class="blah-blah">page2</div> import footer

and 2 js files forPage1.js , forPage2.js , which are useful for relevant pages: page1 and page2

What is the best way to connect scripts? I see 2 options:

Enable scripts for each page separately (i.e. forPage1.js for page1 ). But for this you have to transfer jQuery (or some other libraries) to the header. But this seems to have a bad effect on performance.
Connect everything in the footer. It turns out for each page all scripts will be loaded.

Maybe there are already some practices for connecting scripts as needed?

Instead of dividing the page into a header and footer, you need to create the base.html template and inherit it, overriding the blocks specified in it, including the block with scripts, and the problem will be solved by itself.
Only here I suspect, about which template speech is not here?
There is a template engine - JSP (I just didn’t want to bind a question to a specific technology).

0