Как объединить одинаковые JavaScript файлы для десктопной и мобильной версий сайта?

Оффтоп javascript
1

Проблема с дублированием JS файлов

У меня есть сайт с двумя версиями - для компьютеров и для телефонов. Заметил что многие скрипты полностью одинаковые в обеих версиях.

Структура моего проекта:

MainSite/
├── index.html (основные страницы)
├── styles/
├── scripts/
└── mobile/ (папка с мобильной версией)
    ├── index.html (мобильные страницы)
    ├── styles/
    └── scripts/

Видно что в папках scripts/ лежат практически идентичные файлы. Это увеличивает размер проекта без необходимости.

Возможное решение

Думаю можно использовать относительные пути из мобильной версии:

<script src="../scripts/common-functions.js"></script>
<script src="../scripts/utilities.js"></script>

Так мобильные страницы будут брать JS файлы из основной папки. Но не уверен правильно ли это с точки зрения производительности и кеширования.

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

2

Попробуй символические ссылки, если на линуксе сидишь. Делаешь symlink на общие скрипты и забываешь про пути. У меня так было - файл один, а ссылки разбросаны по папкам. Только при деплое помни, что не все хостинги их поддерживают. Зато локально кайф - поправил в одном месте, везде обновилось.

3

Можно создать общую папку /assets/js/ в корне и ссылаться на неё из обеих версий. У меня так было - мобилка подтягивала скрипты через ../assets/js/script.js, а десктоп напрямую assets/js/script.js. Только проверь, что сервер правильно отдает файлы по этим путям - иногда CORS глючит при сложной структуре.

4

Твой подход с относительными путями работает отлично и на производительность не влияет. Делал так в нескольких проектах - выносил общие скрипты в shared/ или common/ и подключал в обеих версиях. Кеширование работает нормально, браузер грузит файл один раз. Только следи, чтобы пути не сломались при изменении структуры папок. Еще можешь глянуть на webpack - он автоматически оптимизирует общий код.

5

Попробуй Webpack или Gulp - они автоматически соберут общие файлы в один бандл для обеих версий. Настроишь раз и всё, никакого дублирования. Какие скрипты у тебя повторяются?

6

Зачем вам две версии? Адаптивная верстка справляется с этим намного проще. Медиа-запросы в CSS делают так, что один код работает везде. Не лучше ли перейти на responsive design? Зачем мучиться с двумя версиями?