JavaScript препроцессор (объединение, сжатие)

[Sanu0074]

Здравствуйте. Есть задача, на сайте подключено много скриптов (всяких кусков голого[ужас просто], целых либ, отдельных объектов). Нужно это все дело оптимизировать.
1. Необходимо все скрипты объединить в один большой скрипт
2. При этом нужно юзать какой-либо препроцессор (выбор падает на TypeScript)
3. При компилирования препроцессором выходной файл должен минифицироваться
4. В итоге, полученный большой файл, нужно использовать не целиком всегда, а на определенной странице только какую-то его часть. Например для страницы product создать класс product и юзать только его и события кот в нем определены, но на странице account все что в product не должно вызываться и не должны срабатывать бинды т.к. для account есть свой класс.
5. Должна быть возможность собирать такой "большой" выходной файл из множества маленьких (юзать всякие include), например чтобы каждый класс (или интерфейс) описать в отдельном файле.
6. По возможности не должно быть много трудности для перехода сайта из того состояния как я описал выше в то которое хочется.

Подскажите, что мне для этого лучше использовать и как решить задачку?
p.s.
Из много найденного, понравился TypeScript, но не уверен до конца в нем. Есть ли там инклуды чтоб по файлам все разбить? Умеет ли он сжимать код при компиляции (минифицировать)? И стоит ли его выбирать?

[nerv_]

одно

1. Необходимо все скрипты объединить в один большой скрипт

не обязывает ко второму

2. При этом нужно юзать какой-либо препроцессор (выбор падает на TypeScript)

и третьему

3. При компилирования препроцессором выходной файл должен минифицироваться

см Webpack'а тред

[Deff]

Здравствуйте. Есть задача, на сайте подключено много скриптов (всяких кусков голого[ужас просто], целых либ, отдельных объектов). Нужно это все дело оптимизировать.

Вариант на клиенте:
Проверять и подгружать всё на localStorage, проверяя перед загрузкой уже наличествующие загрузки, если скрипт загружен, просто вызываем и развёртываем его, причём подгружать в LS можно и после загрузки страницы, тормоз будет лишь при первом входе или очистке кеша.
Хотя если на главной ограничиться минимумом скриптов, а подгружаемые запихнуть в футер, - данное ограничение тоже должно исчезнуть
----------
ЗЫ: При сборке на клиенте типично отправляем еще и кук-массив(для информирования серва) коротких названий существующих скриптов в кеше клиента при запросах очередной страницы, типа: [S1,S2,S5,S11,S24,S32]

[sexbot]

Нужно сделать что-то подобного:

есть некий скрипт get_js.php
ему передается список подключаемых файлов get_js.php?i=main.js,script.js?v=1,...

на серверной стороне код типа такого

<?php isset($_GET['i']) or die();
$lst = $_GET['i'];
$h = md5($lst);
$p = "jscache/$h";
if (!file_exists($p)) { $files = explode(',', $lst); $data = []; foreach ($files as $file) { $data[] = file_get_contents($file); } $data = implode("\n", $data); /* всегда быстрее конкатенации */ file_put_contents($p, $data); }
header("Content-Type: text/javascript");
include $p;

[sexbot]

там еще нужно проверки предусмотреть, а то содержимое index.php твоего посмотрят, а там и до базы доберутся (на php не писал давно, я его в душе ненавижу и презираю)

[Erolast]

Из много найденного, понравился TypeScript, но не уверен до конца в нем. Есть ли там инклуды чтоб по файлам все разбить? Умеет ли он сжимать код при компиляции (минифицировать)? И стоит ли его выбирать?

TypeScript - это диалект ECMAScript, сборка вообще не в его компетенции, для этого отдельные инструменты используются.

см Webpack'а тред

+. Изучай webpack, там все описанные задачи решаются элементарно.

есть некий скрипт get_js.php
ему передается список подключаемых файлов get_js.php?i=main.js,script.js?v=1,...

С таким подходом сервер сложится при малейшем наплыве посетителей: сборка, да еще и с препроцессорами - процесс ресурсоёмкий.