Как в 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(). Но мне хотелось бы подставлять свою альтернативу.

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

Похоже, надо просто подгружать затычки как 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-скриптов, до загрузки основного бандла.
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы