Как импортировать модуль из статики с помощью динамического импорта es6?

Я пытаюсь добавить динамический импорт в свой код, чтобы повысить производительность на стороне клиента. Итак, у меня есть конфигурация веб-пакета, в которой собираются файлы js. В SFCC объединенные файлы находятся в статической папке, где путь к этим файлам выглядит примерно так:/en/v1569517927607/js/app.js)

У меня есть функция, в которой я использую динамический импорт es6 для вызова модуля, когда пользователь нажимает кнопку. Проблема в том, что когда мы вызываем этот модуль, браузер не находит его, потому что путь неверен.

/en/lazyLoad.js net::ERR_ABORTED 404 (Not Found)

Это нормально, потому что файл включен /en/v1569517927607/js/lazyLoad.js.

Есть ли способ добиться этого с правильного пути? Вот мой код.

window.onload = () => {
    const lazyAlertBtn = document.querySelector("#lazyLoad");

    lazyAlertBtn.addEventListener("click", () => {
        import(/* webpackChunkName: "lazyLoad" */ '../modules/lazyLoad').then(module => {
            module.lazyLoad();
        });
    });
};
Источник

3 ответа

У меня была такая же проблема, и я решил ее с помощью модуля Merchant Tools > SEO > Dynamic Mapping в Business Manager.

Там вы можете использовать следующее правило для перенаправления запроса в статическую папку:

**/*.bundle.js i s,,,,,/js/{0}.bundle.js

Все мои файлы фрагментов названы с <module>.bundle шаблон.

Здесь вы можете найти дополнительную информацию:
https://documentation.b2c.commercecloud.salesforce.com/DOC1/topic/com.demandware.dochelp/content/b2c_commerce/topics/search_engine_optimization/b2c_dynamic_mappings.html

Надеюсь это поможет.

Источник

Мы сделали это по-другому. Это потребовало двух шагов

  1. Из файла шаблона добавьте тег скрипта, который создает глобальную переменную для статического пути. Что-то вроде
      // inside .isml template
<script>
    // help webpack know about the path of js scripts -> used for lazy loading
    window.__staticPath__ = "${URLUtils.httpsStatic('/')}";
</script>
  1. Затем вам нужно указать webpack, чтобы он знал, где найти фрагменты, изменив __webpack_public_path__ во время выполнения
      // somewhere in your main .js file
// eslint-disable-next-line
__webpack_public_path__ = window.__staticPath__ + 'js/';

Необязательный шаг:

Вы также можете удалить версию кода из своего __staticPath__ используя замену (по крайней мере, мы должны были это сделать)

__webpack_public_path__ = window.__staticPath__.replace('{YOUR_CODE_VERSION_GOES_HERE}', '') + 'js/';

Источник

Я считаю, что тебе, вероятно, понадобится немного path.resolve() магия либо в вашем операторе импорта, либо в вашем webpack.config.jsфайл, как показано в принятом ответе на этот вопрос: Установите правильный путь к компоненту отложенной загрузки с помощью Webpack - ES6

Источник
Другие вопросы по тегам