Имеет ли смысл склеивать для каждой страницы разные js библиотеки?

Question

[Думай Головой]

Всем привет!

Предположим мы разрабатываем saas сервис и у нас есть от 10 до 20 различных плагинов, которые мы подключаем на разные страницы. Плагины вида: отображение графиков, попапы, тултипы, селекты, сортировка таблиц; в общем разные, размером от 10 до 150кб.

И у нас есть страницы, на которых подключаются почти все плагины (дашбоард какой-нибудь к примеру).
Имеет ли смысл склеивать плагины в один файл в целях уменьшения нагрузки на сервер? Но нужно учитывать, что таких страниц несколько, и склеенный файл плагинов для одной страницы не обязательно будет актуален для другой, так как для неё нужны будут уже другие плагины.

Вообще есть ли такой инструмент, который бы склеивал плагины не так как это делает grunt и gulp, а так, чтобы он парсил сам html файл, считывал пути к плагинам и порядок их подключения, делал склейку на основе этих данных и вместо набора тегов script вставлял один индивидуально склеенный script файл для каждой html страницы?

Comments

[Владимир Шикльгрубер]

от ты... Ответ так и не выбрал..

Answer 1

[Владимир Шикльгрубер]

Склейте. Один раз клиент закеширует и всё. да и нагрузка меньше

Answer 2

[Назар Мокринский]

Для каждой страницы всё в один файл склеивать не стоит, при переходе на другую страницу придется грузить те же библиотеки в составе другого файла.
Нужно делить на логические части.
Я посчитал, что этим должен заниматься фреймворк/движок, поэтому в 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"
	]
}