具有npm的Webpack：模块动态导入

Question

我正在向使用npm和webpack的现有项目添加一些可选功能。此功能利用了一个相当大的模块（确切地说是tfjs），我希望默认情况下阻止加载它，因为它大约使应用程序的有效负载增加了一倍。理想情况下，我将能够为导航到该功能的用户动态导入它。

无论如何，我是第一个承认我完全不在这里的人。我对Webpack不太熟悉。所以我的问题是：

动态加载npm模块依赖项的一般策略是什么？

我已经看过代码拆分-这似乎仅适用于源，而不适用于依赖项。我正在考虑使用单独的package.json和node_modules /创建一个子目录，并将其导出为静态资源。

Answer 1

代码拆分实际上应该对您有用！它适用于源，但只会将每个源实际使用的依赖项捆绑在一起。因此，如果仅确保仅在使用依赖项的页面上导入依赖项并正确设置代码拆分，则应该获得上面描述的行为。如果没有有关您的项目结构的更多详细信息，实际上不可能给出确切的webpack配置更详细的答案（老实说，即使您确实提供了详细信息，我也可能不会花时间为您进行设置），但是我认为通过代码拆分可以使您走上正确的轨道。

Answer 2

是的，正如schu34所说，您肯定在正确的轨道上。

通常，设置基本上是：

1）确保已通过其他模块或脚本标记将库加载到页面上。它应该在window对象上公开。例如，jQuery在大多数站点上都以window.$和window.jquery的形式公开，并且都可以使用。

2）将库安装为开发依赖项

3）在Webpack中，将库配置为外部库。这将允许您将lib导入源中，而无需在输出中包括它。参见：Webpack Externals

4）如果使用Flow，这可能会有些棘手。在这种情况下，我倾向于只创建一个const（const $ = window.$，因为我很懒，但是有更好的解决方案。

我希望这会有所帮助。