Задать вопрос
sergiks
@sergiks
♬♬
webpack

Как в webpack указать альтернативный источник (fallback) для внешних CDN модулей?

Перевожу проект с RequireJS на webpack. В старом конфиге часть библиотек загружается с внешних сайтов: Яндекс.Метрика, скрипты ВК и другие. У трети посетителей реклама режется и эти скрипты не пройдут. На этот случай подставляются (path fallbacks) пустышки с вызываемыми методами. Например, для Яндекс.Метрики такой конфиг: 
requirejs.config({
  paths:
    "yametrika": [ "//mc.yandex.ru/metrika/watch", "lib/yamertika_dummy"],

В коде require'ится metrika и вызываются Metrika.params(), Metrika.reachGoal() и т.п. В случае, если AdBlock или подобный не пропустил скрипты Метрики, вызываются пустые методы в заглушке.

У webpack нашёл пока только секцию externals, где можно указать модули, не включаемые в бандл.

Наверное, можно было бы обернуть каждый вызов методов Метрики в try{..} catch(). Но мне хотелось бы подставлять свою альтернативу.

Как лучше поступить с вероятностью блокировки загрузки некоторых таких модулей?
  • Вопрос задан
  • 403 просмотра
Комментировать
Подписаться 3 Простой Комментировать
Пригласить эксперта
Ответы на вопрос 1
sergiks
@sergiks Автор вопроса
♬♬
Пока не пробовал на рабочем проекте, только собираюсь с мыслями.

Похоже, надо просто подгружать затычки как polyfill'ы. См. документацию Loading Polyfills.

  1. Вынести затычкины коды в отдельный файл polyfills.js
  2. В конфиге webpack указать ещё один или несколько entry point для полифилла(ов): 
    entry: {
  polyfills: './src/polyfills.js',
  index: './src/index.js'
},

  3. ..и ещё один output:
    output: {
  filename: '[name].bundle.js',
  // создаст polyfills.bundle.js и index.bundle.js

  4. В HTML страницы, до тега <script> основного бандла, вставить попытку загрузить Метрику и проверку её загрузки. В случае провала загружать полифильный бандл: 
    <script src="https://mc.yandex.ru/metrika/watch.js"></script>
<script>
if( !(Ya in window)) {
  var scriptElement = document.createElement('script');

  scriptElement.async = false;
  scriptElement.src = '/polyfills.bundle.js';
  document.head.appendChild(scriptElement);
}
</script>



Т.е. смысл в том, чтобы подготовить один или несколько доп. бандлов с затычками и загружать их по результатам проверки загрузки CDN-скриптов, до загрузки основного бандла.
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Middle Fullstack Developer (Laravel + Vue.js) (Contractor, Remote)
Hicaliber
от 2 500 до 3 800 $
Преподаватель по программированию
Современный цифровой колледж • Пермь
от 10 000 до 50 000 ₽
Frontend Developer (React)
Real Deal • Санкт-Петербург
от 300 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Требуется завершить backend (проектная работа)
25 апр. 2024, в 19:42
49000 руб./за проект
Проверить тест по Data Science
25 апр. 2024, в 19:41
2000 руб./за проект
Верстка сайта и натяжка на wordpress
25 апр. 2024, в 19:22
18000 руб./за проект
Ещё заказы