Для каждой страницы всё в один файл склеивать не стоит, при переходе на другую страницу придется грузить те же библиотеки в составе другого файла.
Нужно делить на логические части.
Я посчитал, что этим должен заниматься фреймворк/движок, поэтому в
CleverStyle CMS реализовал на уровне ядра учёт зависимостей между компонентами, чтобы подключать только нужные вещи на определённых страницах.
В результате получается как-то так:
...
<link href="/storage/pcache/_Landing_en.css?b0e10" rel="stylesheet">
<link href="/storage/pcache/Landing_subscribe_modal_Landing_en.css?7874c" rel="stylesheet">
<link href="/storage/pcache/Indiegogo_Landing_en.css?9251c" rel="stylesheet">
...
<script src="/storage/pcache/_Landing_en.js?79651"></script>
<script src="/storage/pcache/Landing_subscribe_modal_Landing_en.js?4dec4"></script>
<script src="/storage/pcache/Picturefill_Landing_en.js?2d524"></script>
<link href="/storage/pcache/_Landing_en.html?b83ba" rel="import">
<link href="/storage/pcache/Picturefill_Landing_en.html?c5e70" rel="import">
<link href="/storage/pcache/Indiegogo_Landing_en.html?46867" rel="import">
...
К примеру, _Landing_en.js - это общие файлы для темы Landing и языка en, а Picturefill_Landing_en.html это уже от плагина Picturefill, который нужен для работы этой страницы, на других страницах его может не быть.
Всё это генерируется и собирается автоматически, ключи после ? составляются на основании содержимого файлов, то есть изменение одного файла не повлечет сброс всего кэша, а только той части, что изменилась.
Для объявления что и где нужно учитываются зависимости между компонентами, а внутри компонента есть
декларативный маппинг к страницам:
{
"admin/Blogs" : [
"admin.css"
],
"Blogs" : [
"general.css",
"general.js",
"cs-blogs-post/index.html",
"cs-blogs-posts/index.html",
"cs-blogs-posts/cs-blogs-posts-post/index.html",
"cs-blogs-head-actions/index.html"
]
}
