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

Question

[Сергей Соколов]

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

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

Answer 1

[Сергей Соколов]

Пока не пробовал на рабочем проекте, только собираюсь с мыслями.

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