1

我正在尝试将动态导入添加到我的代码中，以在客户端获得更好的性能。所以我有一个捆绑 js 文件的 webpack 配置。在 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();
        });
    });
};
4

3 回答 3

2

我遇到了同样的问题，并使用 Business Manager 中的 Merchant Tools > SEO > Dynamic Mapping 模块解决了这个问题。

在那里，您可以使用如下规则将请求重定向到静态文件夹：

**/*.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

希望这可以帮助。

于 2020-03-11T09:02:58.173 回答
1

我相信您可能需要path.resolve()在导入语句或webpack.config.js文件中做一些魔术，如该问题的公认答案所示：使用 Webpack - ES6 设置延迟加载组件的正确路径

于 2019-10-24T23:42:03.857 回答
0

我们以不同的方式做到了。这需要两个步骤

  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_public_path__然后您需要通过在运行时更改来指示 webpack 知道在哪里找到块
// 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/';

于 2021-05-11T07:23:02.833 回答