Импорт JS для страниц отдельно

222

25 февраля 2017, 03:47

Всем привет! Имеется такая структура:

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

и 2 js файла forPage1.js, forPage2.js, которые полезны для соответствующих страниц: page1 и page2

Как лучше всего подключить скрипты? Я вижу 2 варианта:

Подключить скрипты для каждой страницы отдельно (т.е. forPage1.js для page1). Но для этого придется перенести jQuery (или какие-то другие библиотеки) в header. Но кажется это плохо влияет на производительность.
Подключить все в footer. Тут получается для каждой страницы будут подгружаться все скрипты.

Может есть уже какие-то практики для подключения скриптов по необходимости?