Как объединить две + отдельные библиотеки JS в один файл - PullRequest
Новая
       22

Как объединить две + отдельные библиотеки JS в один файл

0 голосов
/ 31 августа 2018

У меня есть несколько библиотек (например, semantic ui, jquery ...), которые я обычно загружаю отдельно в свой тег <HEAD> непосредственно из CDN, каждая библиотека имеет свой собственный тег <SCRIPT>.

Затем я попытался открыть содержимое каждого файла JS, скопировал каждый из них и добавил каждый контент в один локальный пустой файл JS. Затем я импортировал этот единственный файл в свой проект. Хорошо, все работало нормально и никаких ошибок на консоли НО что-то не работает.

Проверка вкладки NETWORK в Chrome Dev Tools Я обнаружил, что эти библиотеки также пытаются динамически загружать много файлов CSS / изображений. Браузер пытается загрузить эти ресурсы из моего локального домена, а не из CDN - конечно. Так что мне придется перенести все эти файлы и на мой локальный сервер.

Но у меня такой вопрос: могу ли я использовать что-то похожее на тег BASE, но только на сценарии?

Например, мой single.js будет выглядеть так: 

base_download = 'cdnjs.cloudflare.com';
//HERE COMES THE CONTENT OF JQUERY LIBRARY
//...

base_download = 'cdn.jsdelivr.com';
//HERE COMES THE CONTENT OF SEMANTIC UI LIBRARY
//...

base_download = 'cdnjs.cloudflare.com';
//HERE COMES THE CONTENT OF THE ANIMATE JS LIBRARY
//...

Таким образом, браузер будет правильно знать, куда загружать контент, который запрашивает каждый код js.

Если мне было непонятно, я прошу прощения, и я здесь, чтобы уточнить, что вам нужно!

1 Ответ

0 голосов
/ 31 августа 2018

Из этого вопроса и вашего другого вопроса я думаю, что вы, возможно, неправильно понимаете цель CDN.

В этом вопросе вы говорите, что хотите скопировать код, размещенный на CDN, объединить его в единый ресурс и разместить самостоятельно . Это не проблема. Однако способ сделать это - не использовать файлы, размещенные на CDN, а использовать фактический исходный код библиотеки и создать свой собственный пакет через такой пакет, как webpack, browserify или rollup.

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

Кроме того, в одном из ваших комментариев вы говорите:

загрузка одного файла намного быстрее, чем загрузка 10 отдельных JS файлы для 10 разных библиотек. Для каждой библиотеки в браузере есть инициировать запрос, разрешение домена и так далее. Присоединение файлов JS сделать загрузку намного быстрее, а также PageSpeed ​​Insights даст вам много лучший результат при импорте меньшего количества файлов JS

Это верно, если вам действительно нужно загрузить ресурс. Как я уже упоминал в вашем другом вопросе, цель CDN состоит в том, чтобы попытаться сделать так, чтобы вам не приходилось загружать копию библиотеки каждый раз, когда вы посещаете другой веб-сайт. Вместо этого, если оба Сайт A и Сайт B используют somelib@2.0.0, и оба загружают ресурс, имея скрипт с src: <script src="http://some.cdn.com/somelib@2.0.0"></script> на любом сайте, который вы посещаете первым, ваш пользователь будет загружать скрипт, и всякий раз, когда ваш пользователь посещает второй сайт, браузер скажет: «Этот ресурс уже кэширован, я просто буду его использовать».

Это сохраняет сетевой вызов для вашего пользователя, а это означает, что нет никаких накладных расходов на запрос, только накладные расходы, которые требуются браузеру, чтобы понять, что у него уже есть ресурс.

...