Как объединить все js в 1 запрос?

Question

[Константин]

У меня проблема с сайтом, очень много подключено js файлов и css , как все js объединить в один? и также css
Есть доступные решения/мануалы для нубов?

Comments

[Strannyk]

А, например, Webpack использовать?

[alex-1917]

Strannyk, перед использованием вебпака крайне желательно включать голову, а то достался от одного такого дурика - вроде стильномодномолодежно, сжато вебпаком, манифест даже заботливо приложен, но по сути напихал туда гавна и объединенный скрипт под мегабайт вылез. Для одного маленького текстового скроллера - 300кБ js-простыни и вагон css, вместо одного слайдера - три разных. дурик кароч. Вебпаку научился, а азы сквозняком прошли, понос называется.

Answer 1

[alex-1917]

Ну раз просил для нубов - Notepad++
1. Создаешь пустой js
2. В нужной последовательности вставляешь код из своей кучи файлов, сразу бери минифицированные версии.
3. Подключаешь этот файл вместо кучи других.
3. ВСЁ.
Картинки у тебя пропали, потому что css криво объединяешь. Пути банально пробеги и скорректируй.
Работы на 10 минут.

Другой вопрос - разные скрипты на разных страницах - но это следующая глава твоего трудного пути супер-кодера.

И озвучить движок зря не стал, конспирация конспирацией, но в том же битрикс такое прокатит частично, там для каждого компонента может быть свой мини-файлик js. И он нужен будет только на определенной странице/разделе. В битрикс кароч штатный механизм работает на ура - он тебе и сожмет все в два файла и код минифицирует.

Answer 2

[Владимир]

https://webpack.js.org/
https://learn.javascript.ru/screencast/webpack

Answer 3

[Oleg]

А сайт на чистом html, css, js ?? Или на движке?

Если второе, то там свои встроенные способы могут быть, как например в битриксе.

А если первое, то я эту проблему решил изначально разрабатывая сайт на стартовом шаблоне на основе Gulp, где уже прописана логика сбора всех стилей и скриптов в один файл (один js и один css).
Например, тут видео с мануалом и ссылкой на скачивание.

Ну а если это не годится, и нужно просто разово минифицировать все свои скрипты и стили, то берёте/скачиваете их все, далее гуглить "минифицировать css online", находим какой-нить такой сайт, вставляем один за другим все стили в поле для вставки, жмякаем на кнопку компиляции и получаем совмещенный минифицированный код. Далее вставить его в свой файл и подключить, старые подключения убрать. Аналогично со скриптами.

Если среди этого нет нужного ответа, переформулируйте/дополните вопрос.

Comments

[Константин]

сайт на опенкарт 3 , я по отдельности сжал файлы, gulp для меня тьма... но попытаюсь посмотреть ваше видео и разобраться

[Oleg]

gradk, блин, тогда галп врядли поможет.
А какие конкретно файлы надо объединить?
Стили и скрипты подключенные из CDN?
Если так, то все их можно скачать и запихнуть в один свой файл, его и подключить в темплейте. Плохо знаком с опенкартом(

[Константин]

Oleg, да пробывал только что в один не работает слайдер и в стилях видимо пути поменялись, часть иконок отвалилось.

вообще да cdn скрипты...слишком много подключений и сайт грузится неистово долго

[ProjectSoft]

gradk, откажитесь от cdn и делайте с помощью любых препроцессоров gulp, grunt, webpack и т. п.
Довольно доходчиво по grunt. Второй и третий урок.
Вообще, эти вопросы решаются на момент разработки.
В том состоянии, которое вы описали - да, работы предстоит очень много, но это решаемо.