从 CDN 导入的代码拆分块的 Webpack 设置

Posted 2023-02-22

【中文标题】从 CDN 导入的代码拆分块的 Webpack 设置

【英文标题】：Webpack setup for code-split chunks imported from CDN

【发布时间】：2017-10-03 23:56:33

【问题描述】：

我们正在开发一个 React 组件库。某些组件需要更新，而无需重新部署主机应用程序代码。这很像谷歌地图库，其中客户端 API 是一个小的 shell 代码，它在运行时导入实际的地图代码，从而允许热更新而无需任何主机停机时间。 所以我们计划把这个库的输出分成两部分-

Shell 组件库，任何主机应用程序代码都将使用该库来导入 Shell 组件。例如。

import Notifications from 'our-shell-lib';
render()
    return <Notifications .../>;

我们计划在我们的服务器上托管的核心组件库。我们将继续使用新的修复程序和功能对其进行更新。

在上面的示例中，Notifications 组件将从我们的服务器下载 NotificationsCore 组件并在内部安装它。

我们已经能够导出单个 shell 组件，并使用 here 描述的基于 scriptjs 的技术在运行时正确下载相应的核心组件。

但是，当核心组件使用动态导入时，这会中断，从而导致代码拆分。所有核心组件文件都在远程服务器上可用，但我们还没有成功地将它们打包成具有动态导入的核心组件可以以与服务器 URL 无关的方式从远程服务器加载其拆分块。 我们不想在核心包中硬编码公共路径。我们可以在运行时将服务器路径传递给核心组件，以帮助它找到动态导入，但还没有找到这样做的方法。

想法？

【问题讨论】：

所以如果你可以在运行时传递服务器路径就可以解决所有问题？

是的，请看下面我的回答。

【参考方案1】：

抱歉回复太晚了......

我们能够通过使用__webpack_public_path__ 解决这个问题。在发布这个问题时，关于这个简洁的小功能的文档很少。它允许您设置 webpack shim 使用的公共路径（包含在每个 webpack 包中）以解析相对导入。

所以我们在核心库中导出了一个瘦包装函数，shell 组件可以调用该函数来设置他们从哪个 CDN 导入核心库的公共路径。